jquery - 尝试删除从按钮生成的 <li> 时，remove() 不起作用

Question

我有一个按钮可以将 li 添加到有序列表中。在添加的此项中，有一个删除按钮。我试图将此按钮嵌套在 li 删除本身和父级中，但 remove() 似乎不起作用。

$('.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();
});

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

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

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>