Question

我非常感谢你的帮助。我希望在单击时删除使用“#save”按钮创建的列表项。评论的方法不起作用。如果我把'h1'或其他东西它没有问题。此外，“＃delBtn”按钮删除所有列表项没有问题。但是当我点击要删除的列表项时，我无法使其工作。感谢您提前的时间。

function Contact(first, last) {
  this.firstName = first;
  this.lastName = last;
}


$(document).ready(function() {
  let a_contacts = [];

    $("#delBtn").click(function(){
      $("li").remove();
    });

    $("#save").click(function(){
      event.preventDefault()

      var inputtedFirstName = $("input#new-first-name").val();
      var inputtedLastName = $("input#new-last-name").val();
      var newContact = new Contact(inputtedFirstName, inputtedLastName);
      $("ul#contacts").append("<li class='contact'>" +'First Name: '+ newContact.firstName + ' Last Name: '+ newContact.lastName + "</li>");

      a_contacts.push(newContact);

      $("input#new-first-name").val("");
      $("input#new-last-name").val("");
    });


        //---------------------------------------------------------------



      // $("li").click(function() { 
      //   $(this).remove();
      //  });


      //   $('li').click(function(e){
      //     $(e.target).remove();
      // });


});


<!DOCTYPE html>
<html>
  <head>
    <link href="CSS/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="CSS/style.css" rel="stylesheet" type="text/css">
    <script src="JS/jquery-3.2.1.js"></script>
    <script src="JS/myjava.js"></script>
    <title>Address book</title>
  </head>
  <body>
    <div class="container">
      <h1 id="haha" >Address book</h1>

      <div class="row">
        <div class="col-md-6">
          <h2>Add a contact:</h2>

          <form id="new-contact"><!-- form -->
            <div class="form-group">
              <label for="new-first-name">First name</label>
              <input type="text" class="form-control" id="new-first-name">
            </div>
            <div class="form-group">
              <label for="new-last-name">Last name</label>
              <input type="text" class="form-control" id="new-last-name">
            </div>

            <button id="delBtn" class="btn">Add</button>
            <button id="save"  class="btn">Save</button>
          </form><!-- form -->

          <h2>Contacts:</h2>
          <ul id="contacts">

          </ul>
        </div>
        <div class="col-md-6">
          <div id="show-contact">
            <h2></h2>

            <p>First name: <span class="first-name"></span></p>
            <p>Last name: <span class="last-name"></span></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

尝试委派的事件监听器。我相信，由于这些元素是动态创建的，因此事件侦听器在页面加载时找不到它们并附加。尝试做这样的事情：

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

正在发生的事情是文档在页面加载时获取事件监听器，并在创建后将点击效果传递给所有li。

Answer 2

这很可能是因为您在加载时在页面中已的li元素上绑定了click事件，而在加载时仅。此事件不适用于动态创建的新项目... Try this so answer

Answer 3

如果要删除文档准备好后创建的元素li。您需要使用函数delegate

或者你可以写如下

$(document).on('click','li', function(){
   var el = $(this);
   el.remove();
});

Answer 4

这个简单的代码应该在带有id联系人的ul中单击时删除"Foo"个项目。

In [1]: import dis
   ...: import sys
   ...:
   ...: def foo():
   ...:     var1 = "Foo Bar"
   ...:     var2 = "%s %s" % ("Foo", "Bar")
   ...:     print(f'plain eq: {var1 == var2}')
   ...:     print(f'plain is: {var1 is var2}')
   ...:     print(f'intern is: {sys.intern(var1) is sys.intern(var2)}')
   ...:
   ...: dis.dis(foo)
   ...: foo()
   ...:
  5           0 LOAD_CONST               1 ('Foo Bar')
              2 STORE_FAST               0 (var1)

  6           4 LOAD_CONST               9 ('Foo Bar')
              6 STORE_FAST               1 (var2)

  7           8 LOAD_GLOBAL              0 (print)
             10 LOAD_CONST               5 ('plain eq: ')
             12 LOAD_FAST                0 (var1)
             14 LOAD_FAST                1 (var2)
             16 COMPARE_OP               2 (==)
             18 FORMAT_VALUE             0
             20 BUILD_STRING             2
             22 CALL_FUNCTION            1
             24 POP_TOP

  8          26 LOAD_GLOBAL              0 (print)
             28 LOAD_CONST               6 ('plain is: ')
             30 LOAD_FAST                0 (var1)
             32 LOAD_FAST                1 (var2)
             34 COMPARE_OP               8 (is)
             36 FORMAT_VALUE             0
             38 BUILD_STRING             2
             40 CALL_FUNCTION            1
             42 POP_TOP

  9          44 LOAD_GLOBAL              0 (print)
             46 LOAD_CONST               7 ('intern is: ')
             48 LOAD_GLOBAL              1 (sys)
             50 LOAD_ATTR                2 (intern)
             52 LOAD_FAST                0 (var1)
             54 CALL_FUNCTION            1
             56 LOAD_GLOBAL              1 (sys)
             58 LOAD_ATTR                2 (intern)
             60 LOAD_FAST                1 (var2)
             62 CALL_FUNCTION            1
             64 COMPARE_OP               8 (is)
             66 FORMAT_VALUE             0
             68 BUILD_STRING             2
             70 CALL_FUNCTION            1
             72 POP_TOP
             74 LOAD_CONST               0 (None)
             76 RETURN_VALUE
plain eq: True
plain is: False
intern is: True

使用jQuery

4 个答案: