javascript - JS : Target and remove dynamically added element

Question

我认为这是一个常见问题，但我无法在其他线程中找到答案。

这里的基本思想/目标是，如果一个任务被标记为重要，它就会被添加到象限 1。如果不是，则将其添加到象限 2。任务完成后，可以通过单击将其关闭。

HTML:我有一个简单的页面:

• 文本输入(即“任务”)
• 复选框(即“重要”)
• 提交按钮(即“submitTask”)
• 两个 div(“quadrant1”和“quadrant2”)。

JS:

$(document).ready( function () {
  $('#submitTask').on("click", function() {
    var task = $("#task").val();
    var important = $("#important").prop("checked");

    var addToQuadrant = function (task, important) {
      if (important == true) {
        $("#quadrant1").append(
          "<p class='taskHolder'> " + task + " </p>");
      } else if (important == false) {
        $("#quadrant2").append(
          "<p class='taskHolder'> " + task + " </p>");
      }
    });
  });

  addToQuadrant(task, important);

  $('body').on('click', '.taskHolder', function () {
    $('.taskHolder').slideUp();
  });
});

我的问题是，由于我对两个段落元素使用相同的 ID(即“taskHolder”)，如果我一次向我的页面添加多个任务，我将无法删除多个任务。

我的问题是:我怎样才能动态地向 DOM 添加一个元素，同时给它一个唯一的 ID 或选择器，以便每个任务都可以被唯一地定位和关闭？

Answer 1

使用:

$(this).slideUp();

代替

$('.taskHolder').slideUp();

在事件处理程序中，this 引用事件应用到的元素。

以下是我用来实现整个事情的最少代码:

$(document).ready(function() {
  var task = $("#task");
  var cb = $("#important");
  
  $("button").click(function() {
    $("<p></p>", {
      text: task.val(),
      "class": "task"
    }).appendTo(cb[0].checked ? "#quadrant1" : "#quadrant2");
  });
  
  $("body").on("click", ".task", function() {
    $(this).slideUp(500, function(){ $(this).remove(); });
  });  
});

div { border: thin black solid; margin: 4px; min-height: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Task: <input id="task"></label>
<label><input type="checkbox" id="important"> Important</label>
<button>Add</button>
<div id="quadrant1"></div>
<div id="quadrant2"></div>