jQueryで追加された要素を削除するにはどうすればよいですか？

jQueryでは、要素を追加したり削除したりできます。要素を追加するコードがあります。今私はそれをクリックすると、同じ要素を削除したいと思います。jQueryで追加された要素を削除するにはどうすればよいですか？

これをjQueryのToDoリストと呼ぶのに最適な方法は何ですか？

$(document).ready(function() { 
    $("#add").click(function() { 
     var newToDo = $("#newToDo").val(); 
     if(newToDo.length > 0){ 
      $("#toDoList").append("<p>" + newToDo + "</p>"); 
      $("#newToDo").val(" "); 
     } 
    }); 
});

<h1>Todo list</h1> 
<form name="form" action="#"> 
    <input id="newToDo" type="text" name="in"> 
    <button id="add">Add!</button> 
</form> 
<div id="toDoList"></div>

出典

2017-10-04 Kevin Tabak

あなたが動的ような要素を作成するために、イベントを添付するイベントの委任を使用する必要があり

：

$("#toDoList").on('click', 'p', function() { 
    $(this).remove(); 
});

注：フォーム内の任意のbuttonタグが考慮されるボタンを提出するとして、それがするので、ページをリフレッシュして、ボタンにtype="button"を追加しないようにしてください。

<button type="button" id="add">Add!</button>

これが役に立ちます。

$(document).ready(function() { 
 
    $("#add").click(function() { 
 
    var newToDo = $("#newToDo").val(); 
 
    if (newToDo.length > 0) { 
 
     $("#toDoList").append("<p>" + newToDo + "</p>"); 
 
     $("#newToDo").val(" "); 
 
    } 
 
    }); 
 
    
 
    $("#toDoList").on('click', 'p', function() { 
 
    $(this).remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Todo list</h1> 
 
<form name="form" action="#"> 
 
    <input id="newToDo" type="text" name="in"> 
 
    <button type="button" id="add">Add!</button> 
 
</form> 
 
<div id="toDoList"></div>

出典

2017-10-04 22:20:30

あなたは、単に変数に要素を格納することができます：

$(document).ready(function() { 
    $("#add").click(function() { 
     var newToDo = $("#newToDo").val(); 
     if(newToDo.length > 0){ 
      var anotherToDo = $("<p>" + newToDo + "</p>"); 
      $("#toDoList").append(anotherToDo); 
      $("#newToDo").val(" "); 

      // later when you want to delete it 
      anotherToDo.remove(); 
     } 
    }); 
});

するか、それにIDを与えると、その使用してそれを削除します。

$(document).ready(function() { 
    $("#add").click(function() { 
     var newToDo = $("#newToDo").val(); 
     if(newToDo.length > 0){ 
      var anotherToDo = $("<p>" + newToDo + "</p>").attr('id', '#someid'); 
      $("#toDoList").append(anotherToDo); 
      $("#newToDo").val(" "); 

      // later when you want to delete it 
      $('#someid').remove(); 
     } 
    }); 
});

出典

2017-10-04 22:28:57 marekpw

ルックスをそれはすでにあなたのために答えられているように、ここでは簡単な方法はwhあなたはjQueryのに必要で：それは新しい

// external.js 
 
$(function(){ 
 

 
var todo = $('#todo'); 
 
function todos(){ 
 
    $('#todos>li').click(function(){ 
 
    todo.val($(this).text()); 
 
    }); 
 
} 
 
function remove(){ 
 
    $('#todos>li').remove(":contains('"+todo.val()+"')"); 
 
} 
 
function add(){ 
 
    var tv = $.trim($('#todo').val()); 
 
    if(tv !== ''){ 
 
    remove(); $('#todos').append('<li>'+tv+'</li>'); todos(); todo.val(''); 
 
    } 
 
} 
 
todo.focus(function(){ 
 
    todo.val(''); 
 
}); 
 
$('#frm').submit(function(e){ 
 
    add(); e.preventDefault(); 
 
}); 
 
$('#add').click(add); 
 
$('#rmv').click(function(){ 
 
    remove(); todos(); 
 
}); 
 

 
});

/* external.css */ 
 
html,body{ 
 
    padding:0; margin:0; 
 
} 
 
.main{ 
 
    width:940px; padding:20px; margin:0 auto; 
 
} 
 
label{ 
 
    margin-right:4px; 
 
} 
 
#todos>li{ 
 
    cursor:pointer; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <meta name='viewport' content='width=device-width' /> 
 
    <title>Add Remove to List - jQuery</title> 
 
    <link type='text/css' rel='stylesheet' href='css/external.css' /> 
 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
    <body> 
 
    <div class='main'> 
 
    <form id='frm' name='frm'> 
 
     <label for='todo'>New To Do</label><input id='todo' name='todo' type='text' /><input id='add' name='add' type='button' value='add' /><input id='rmv' name='rmv' type='button' value='remove' /> 
 
    <ol id='todos'></ol> 
 
    </form> 
 
    </div> 
 
    </body> 
 
</html>

は（もちろん、引用符なし）入力を行うには：タイプ「店に行きます」。 Enterを押します。「私の髪をする」とタイプします。 Enterを押します。「自転車に乗る」と入力します。 Enterを押します。削除する場所のリストをクリックして、削除ボタンを押します。事故であれば、もう一度addを押すことができますが、入力に注目すると次の入力のためにこのデザインでテキストがクリアされます。また、データベースの実装に備えています。

出典

2017-10-04 22:52:05 PHPglue

jQueryで追加された要素を削除するにはどうすればよいですか？

答えて

関連する問題