Question

在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>

Answer 1

您应该使用事件委派将事件附加到动态创建的元素，如：

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

注意：表单中的任何button标记都会被视为提交按钮，因此它会刷新您的页面，以避免您应该在按钮中添加type="button"，喜欢：

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

希望这有帮助。

＆＃13;

$(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();
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

您只需将元素存储在变量中：

$(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();
        }
    });
});

Answer 3

看起来它已经为您解答了，但这是在jQuery中做您想做的事情的简单方法：

＆＃13;

// 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();
});

});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

新的待办事项输入（当然没有引号）：输入＆＃34;转到商店＆＃34;。按Enter键。输入＆＃34;做我的头发＆＃34;。按Enter键。键入＆＃34;骑自行车＆＃34;。按Enter键。单击要删除的列表，然后按“删除”按钮。如果发生意外，您可以再次按添加，但专注于输入会清除文本，以便您使用此设计进行下一次输入。它也为数据库实现做好了准备。

如何使用jQuery删除附加元素？

3 个答案: