删除附加点击[重复]答案

【问题标题】：remove an append with click [duplicate]删除附加点击[重复]
【发布时间】：2018-01-30 03:39:31
【问题描述】：

我有以下代码： html:

    <body>
      <div>
        <p  class='Go'>
          Create
        </p>
        <p class='Del'>
        Remove
        </p>
      </div>
   </body>

CSS：

.Go{
    background-color: lime;
    width:45px;
    text-align: center;
}
.bad{
    background-color:Red;
    width: 45px;
    text-align:center;
}
.Del{
    background-color:pink;
    width: 55px;
}

Javascript(Jquery)

$(document).ready(function(){
    $('.Go').click(function(){
       $('div').append("<p class='bad'>Delete</p>");
    });
    $('.bad').click(function(){
       $(this).remove();
    });
    $('.Del').click(function(){
       $('.bad').remove();
    })
});

这个想法是每次我点击“创建”，它都会添加一个新的“删除”。

每次我点击“删除”，所有的“删除”都会消失，每次我点击“删除”，单个删除都会被删除。

除了最后一个以外，其他都有效。任何想法我在这里犯了什么错误？

【问题讨论】：

这是因为Delete元素是在页面加载后添加的，但.click没有绑定任何东西，因为页面加载时没有bad div。
如果在 div 中设置要删除的部分会怎样。所以如果你点击 remove all 里面的 div 就会被删除。

标签： javascript jquery append

【解决方案1】：

在这种情况下，您无法将 jQuery click 绑定到尚不存在的元素。您只需绑定对 $(document).ready() 的单击。解决此问题的方法是将您想要的删除绑定到在文档准备功能期间存在的元素。

$('body').on('click', '.bad', function(){
  $(this).remove()
})

这表示，每当单击主体时，如果该事件目标具有 .bad 类，则将其删除。这样，jQuery 事件就被正确绑定了。

这里的工作示例：https://jsfiddle.net/xexhdfzw/1/

【讨论】：