瞄准并移除动态添加的元素

JS: Target and remove dynamically added element

本文关键字：添加 元素 动态      更新时间：2023-09-26

我认为这是一个常见的问题，但是我还没有能够在其他线程中找到答案。

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

HTML:

我有一个简单的页面:

  • 文本输入(即:"任务")
  • 复选框(即。"重要")
  • 提交按钮(即:"submitTask")
  • 两个div("象限1"answers"象限2")。

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或选择器，这样每个任务都可以唯一的目标和关闭?

使用说明:

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

用户一个全局变量'counter'，并在每次点击时增加其值，然后添加'taskHolder'。现在每个任务都有了唯一的id。

使用startwithtypeselector来选择。

var cnt = 0;
$(document).ready( function () {
  $('#submitTask').on("click", function() {
    cnt++;
    var task = $("#task").val();
    var important = $("#important").prop("checked");
    var addToQuadrant = function (task, important) {
      if (important == true) {
        $("#quadrant1").append(
          "<p id='taskHolder" + cnt + "' > " + task + " </p>");
      } else if (important == false) {
        $("#quadrant2").append(
          "<p id='taskHolder" + cnt + "'> " + task + " </p>");
  };
  addToQuadrant(task, important);
  $('[id^=taskHolder]').on("click", function() {
     $(this).slideUp();
};
});

备选方案

一个更好的解决方案可能是每个任务的公共类

 "<p class='commonClass" + cnt + "'> " + task + " </p>");

和

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

您需要动态地为每个新添加的元素应用新的ID。

//New length every time you click
var newLength = $('[id^=taskHolder]').length + 1;
//Apply the new ID
$("#quadrant1").append(
     "<p id='taskHolder+newLength+'> New "  + newLength + " </p>");


$('#submitButton').click(function(){
    //New length every time you click
    var newLength = $('[id^=taskHolder]').length + 1;
    //Apply the new ID
    $("#quadrant1").append(
          "<p id='taskHolder+newLength+'> New "  + newLength + " </p>");
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quadrant1">
  <p id="taskHolder_1">New 1</p>  
</div>  
<button id="submitButton">Button</button>

  • 使用唯一id
  • 用$(this)来隐藏完成后的目标项目。

$(document).ready( function () {
  
      var addToQuadrant = function (task, important) {
    			
          if (important == true) {
          	var taskid = $("#quadrant1").length + 1;
            $("#quadrant1").append(
              "<p class='taskHolder' id='task-"+taskid+"'> " + task + " </p>");
          } else if (important == false) {
          	var imptaskid = $("#quadrant2").length + 1;
            $("#quadrant2").append(
              "<p class='taskHolder' id='imp-task-"+imptaskid+"'> " + task + " </p>");
      		};
         };  
  
      $('#submitTask').on("click", function() {
        var task = $("#task").val();
        var important = $("#important").prop("checked");
        addToQuadrant(task, important);
      });    
      $('body').on('click', '.taskHolder', function () {
        $( this ).slideUp();
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Important Task
    <div id="quadrant1" style="border:1px dotted;min-height:20px;margin-bottom: 10px">
      
    </div>
    Task
    <div id="quadrant2" style="border:1px dotted;min-height:20px;margin-bottom: 10px">
    </div>
    Task: <input type="text" id="task" />
    <input type="checkbox" id="important" /> Important
    <input type="button" value="Submit" id="submitTask" />

相关文章：