尝试删除从按钮生成的<li>时，remove（）不起作用

Question

我有一个将li添加到有序列表的按钮。在添加的此项中，有一个删除按钮。我试图让这个按钮嵌套在li里面，删除自身和父对象，但是remove（）似乎不起作用。

x

$('.add').click(()=>{
  var item = "<li>Item - <button class='delete'>Delete</button></li>"
  
  $('ol').append(item);
  
});

$('ol').on( 'click','.delete' ,(e)=>{
  console.log('clicked');
  
  $(e).parent().remove();
});

Answer 1

使用$(e.target).parent().remove();，因为e.target会告诉您单击了哪个元素。

add函数起作用的原因，是因为您不必与单击的元素进行交互。

演示

$('.add').click(()=>{
  var item = "<li>Item - <button class='delete'>Delete</button></li>"
  
  $('ol').append(item);
  
});

$('ol').on( 'click','.delete' ,(e)=>{
  
  $(e.target).parent().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>

</ol>
<button class='add'>Add</button>

Answer 2

这可以做到：

$('ol').on('click', '.delete', function () {
  console.log('clicked');
  $(this).parent().remove();
});