remove this clicked list element with jQuery

Question

I would really appreciate your help here. I want list item that is created with the "#save" button to be removed on click. The commented methods don't work. If i put 'h1' or something else it works no problem. Also the "#delBtn" button removes all list items no problem. But i cant;t make it work when i click on a list item to be removed. Thanks for your time in advance.

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>

Possible duplicate of [Click event doesn't work on dynamically generated elements](https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements) — Herohtar, Jan 29 '18 at 04:21

score 1 · Accepted Answer · answered Jan 27 '18 at 02:39

1

Try a delegated event listener. I believe that since these elements are being created dynamically, the event listeners don't find them and attach when the page loads. Try doing something like this:

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

What is happening is the document takes the event listener on page load and passes click effects to all li's after they are created.

answered Jan 27 '18 at 02:39

Marco Principio

475
3
9

Ok, thanks. This worked like a charm. Thank you a lot for your time. – Happy Coconut Jan 27 '18 at 02:49

score 0 · Answer 2 · answered Jan 27 '18 at 02:36

0

This is most probably because you bind your click event on li elements that are already in your page at load time, and only at load time. This event won't apply for dynamically created new items… Try this so answer.

answered Jan 27 '18 at 02:36

JBA

2,889
1
21
38

score 0 · Answer 3 · answered Jan 27 '18 at 02:44

0

If you want remove element li created by after document ready. You need use function delegate

Or you can write as below

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

answered Jan 27 '18 at 02:44

score 0 · Answer 4 · answered Jan 27 '18 at 02:54

0

This simple code should remove li items when clicked in the ul with id contacts.

$('#contacts').on('click', 'li', function (event) {
      $(event.target).remove()
});

answered Jan 27 '18 at 02:54

Aefits

3,399
6
28
46

remove this clicked list element with jQuery

4 Answers4