jQuery中动态append追加的元素无法点击移除如何解决

你当前使用的$(".items div").click()属于直接事件绑定，只会给页面初始加载阶段就已经存在的、匹配.items div选择器的元素绑定点击移除逻辑。后续通过append()动态追加的新项目，是在这次绑定执行完成后才插入DOM树的，没有被绑定对应的事件回调，自然无法触发移除操作。

使用jQuery的事件委托机制，将事件绑定到页面加载时就已存在、不会动态销毁的静态父元素（这里就是.items容器）上，由父元素代理监听子元素的触发事件，无论子元素是初始渲染的还是后续动态追加的，都能正常响应逻辑。

修正后的核心JS代码如下：

$(document).ready(function() {
  let nextItem = 4;
  // 事件委托：绑定到静态父容器，监听内部div的点击事件
  $(".items").on("click", "div", function() {
    $(this).remove();
  });
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`);
    nextItem++;
  })
});

如果你需要按照描述的右键点击移除的交互，只需要把事件名从click替换为contextmenu，同时加一行代码阻止浏览器默认右键菜单即可：

$(".items").on("contextmenu", "div", function(e) {
  e.preventDefault(); // 屏蔽浏览器默认右键菜单
  $(this).remove();
});

对应的完整HTML结构无需修改：

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

内容的提问来源于stack exchange，提问作者Amin Sanei