Question

此刻，我需要删除单击时由jQuery创建的li元素。

(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()
    })
  })
  var li = $('<li/>')
    .onclick(function() {
      $(this).remove()
    })
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My New Pen!</title>
  <link rel="stylesheet" href="styles/index.processed.css">
</head>

<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>

当前，除了我需要手动重新加载页面以使更改生效之外，此操作已经成功

Answer 1

您的问题就在这里

var li = $('<li/>').onclick(function() {
    $(this).remove()
});

首先，您不需要比较运算符（<，>），因为JQuery会根据标签名称选择元素。此外，您不能以动态方式在动态创建的元素上添加事件侦听器。

here对此进行了讨论。

要解决您的问题，请用以下内容替换上面的内容：

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

工作示例：

(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()
    })
  })
  var li = $(document).on("click", "li", function() {
    $(this).remove();
  });
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

我认为这实际上是您要尝试做的事情：

$('li').each(function (i) {
  $(this).click(() => $(this).remove());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>

Answer 3

请您试一下。

(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()
    })
  })
}())

var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
  listitems[i].onclick = this.parentNode.removeChild((this))

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

从<ul> onclick中删除<li>元素，而无需刷新页面

3 个答案: