Question

我需要在左键单击后删除单个列表元素。我可以删除整个列表，但不能删除单个元素

我已经在Stack上四处看看，但是似乎没有什么可以回答我的特定问题

(function(){

  $(document).ready(function() {

    $("#likeform").submit(function(event) {
      var input = $(this).children("input[name='thing']")
      var thing = $(input).val()
      $("#likes").append("<li>" + thing + "</li>")
      $(input).val("")
      event.preventDefault()
    });

    $("#likes").click(function() {
        alert("test=true")
        $("#likes").remove()

    });

  })
})()





<body>
  <h1>What do you like?</h1>
  <form id=likeform>
    <input name=thing placeholder="a thing you like" size=30>
    <input type=submit>
  </form>

  <ul id=likes></ul>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
  <script src="scripts/index.js"></script>
</body>

</html>

我不确定是否需要为每个列表元素添加特定的ID。

Answer 1

将点击处理程序放在li而不是ul上。然后，您可以使用this引用他们单击的元素。

使用事件委托，以便将其与动态添加的元素一起使用。

$("#likes").on("click", "li", function() {
    $(this).remove();
});

如何使用jQuery click（）从<ul>中删除单个<li>

1 个答案: