CODEWITHSUNDEEP
javascriptjquery
Happy Coconut
Happy Coconut

Reputation: 1063

remove this clicked list element with jQuery

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>

Upvotes: 0

Views: 692

Answers (4)

Aefits
Aefits

Reputation: 3469

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

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

Upvotes: 0

user9273373
user9273373

Reputation:

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

Upvotes: 0

Marco Principio
Marco Principio

Reputation: 495

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.

Upvotes: 1

JBA
JBA

Reputation: 2899

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.

Upvotes: 0

Related Questions