javascript - 单击时删除元素

Question

我试图简单地删除最近的 li。

如果我简单地这样做就可以了:<li><a id="delete-hello">Teste</a></li>

控制台中没有错误。 问题是我的 li生成后用户会执行某些操作(在本例中是单击按钮时) 因此，该方法永远不会被触发，并且 li 永远不会消失。

我的怎么了$("a[id^='delete-']").click(function()生成li后可以运行吗？

$(document).ready(function() {

  //delete testCase row when click delete button
  $("a[id^='delete-']").click(function() {
    console.log('clicked');
    $(this).closest('li').remove();
  });

  var table = $('#dataTable').DataTable({
    buttons: [{
      text: 'Add test case(s)',
      action: function() {
        var testCaseName;
        var data = table.rows({
          selected: true
        }).data();
        console.log(data);
        $.each(data, function(index, value) {
          console.log(value[1]);
          testCaseName = value[1];
          $('#testCaseList').append('<li class="list-group-item justify-content-between">' + testCaseName + '<a class="action-icon" id="delete-' + testCaseName + '" name="' + testCaseName + '"><span class="fa fa-trash"></span></button></li>')
        });
      }
    }]
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<ul id="testCaseList" class="list-group"></ul>

Answer 1

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

由于您的元素是动态添加到 DOM 中的，因此您需要使用事件委托(delegate) on() 相反:

$("body").on('click', "a[id^='delete-']", function() {
    console.log('clicked');
    $(this).closest('li').remove();
});