如何删除jquery中的附加元素

Question

通过右键单击每张图片，该图片将被删除，并通过单击 + 按钮创建一个新项目。

但问题是无法删除创建（附加）的新项目。 为什么会这样？

 $(document).ready(function() { let nextItem = 4; $(".items div").click(function() { $(this).remove(); }); $(".btn").click(function() { $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`); nextItem++; }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="items"> <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div> <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div> <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div> </div> <button class="btn">+</button> </div>

Answer 1

因为这些不是事件处理程序的目标。 它不会自动更新与查询选择器匹配的元素，就像您使用addEventHandler一样 - 它运行一次。 （见下文，他们不会将消息记录到控制台，但硬编码的会记录）。

 $(document).ready(function() { let nextItem = 4; $(".items div").click(function() { console.log("Event processed"); }); $(".btn").click(function() { $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`); nextItem++; }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="items"> <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div> <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div> <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div> </div> <button class="btn">+</button> </div>

相反，我要做的是将删除定义为一个函数，并使用id将其重新添加到新元素中：

 $(document).ready(function() { let nextItem = 4; function removeItem() { $(this).remove(); } $(".items div").click(removeItem); $(".btn").click(function() { $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`); $(`#${nextItem}`).click(removeItem); nextItem++; }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="items"> <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div> <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div> <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div> </div> <button class="btn">+</button> </div>

Answer 2

您应该使用实时事件https://api.jquery.com/live/因为您正在创建一个新的 Dom 元素并且不再附加点击事件

$(".items div").live('click',function() {
    $(this).remove();
  });

Answer 3

尝试这个

$(document).ready(function() {
  let nextItem = 4;
  $(".items div").click(function() {
    $(this).remove();
  });
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`);
    nextItem++;
  })
  $(`div#${nextItem}`).on('click',function(){
     $(this).remove();
  })
});