parent element not removed with jquery click event

Question

I am trying to remove a the parent of a button, which is a list element, once the button has been clicked.

New to the programming world so it may be something simple, but I cant find a solutution based on what I have found with others posting on stack overflow and the internet. Please can someone point out what I am doing wrong?

I am using a combination of Javascript and Jquery. I am trying to utilise the skills I already know of plus a bit of researching in order to get the job done. I am in the process of learning the techniques and skills that would be required to have a similar remove event using pure Javascript, but for now I am just using Jquery for that side of things.

$(document).ready(function() {

  document.getElementById("add").addEventListener("click", function() {

    var taskinput = document.getElementById("task").value;

    if (taskinput) {

      var tasktext = document.createTextNode(taskinput);
      var list = document.createElement("li");
      list.appendChild(tasktext);
      var button = document.createElement("button");
      button.setAttribute("class", "completed");
      button.innerHTML = "X";
      list.appendChild(button);
      document.getElementById("task-to-do").appendChild(list);
      document.getElementById("task").value = " ";
    } else {
      alert("Please enter a task");
    }

  });

  $("button .completed").click(function() {
    $(this).closest("li").remove();;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">

  <header>
    <h1>ENTER A TASK BELOW</h1>
    <input type="text" id="task"><img id="add" src="add.png">
  </header>

  <div id="incomplete-tasks">
    <h4>TO-DO LIST</h4>
    <ul id="task-to-do">

    </ul>

  </div>

Hi, as mentioned I am new to programming and did my research before but was not exactly sure of the term "Event binding". I am learning as I'm going along. As a result of asking this question, I have now gained a knowledge of event binding situations, therefore I am in a position of being more aware of this sort of question before asking it next time. — jimmy118, Sep 28 '17 at 12:07
Hi Alive to Die, I'm not sure what you mean exactly? I am new to stackoverflow. I clicked on the tick and voted your answer up. Is that not showing? Is their only one answer I can tick? — jimmy118, Sep 28 '17 at 12:20
Yes you can marked one answer only. BTW you can up-vote all the answers if they are useful.Thanks — Alive to die - Anant, Sep 28 '17 at 12:30
Ok thanks for letting me know, Alive to Die and once again thanks for your input. That goes for everyone else who answered too. I appreciate all the help guys! — jimmy118, Sep 28 '17 at 12:49

score 1 · Answer 1 · answered Sep 28 '17 at 11:50

1

The items are added dynamically, you therefor need to bind the event on a static item (for example, the document)

So change the function to

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

(Also note that the space between button and .completed is deleted).

answered Sep 28 '17 at 11:50

GreyRoofPigeon

17,833
4
36
59

[Nice solution](https://jsfiddle.net/whjxof56/1/) LinkinTED. – urbz Sep 28 '17 at 11:53
@urbz, remove the quotes from `document` https://jsfiddle.net/whjxof56/2/ – GreyRoofPigeon Sep 28 '17 at 11:55
1

Why not vote for duplicate when you know this has been asked hundreds of times – mplungjan Sep 28 '17 at 11:56
1

Hi, many thanks for the response guys! Also, I have noticed that stack overflow is extremely strict sometimes with questions. I think they should take into consideration that people who are new to programming see a situation or problem from their perception and knowledge. Sometimes we may ask the same question without really realizing that another person had the same technical problem. I wasnt fully aware of the term "event binding". I am still incrementing my knowledge. I think by asking questions, you learn. I did my research beforehand, genuinely could not find help. – jimmy118 Sep 28 '17 at 12:10

freginold · Answer 2 · 2017-09-28T12:06:51.530

One way to do this would be to add an event listener to each button when you create it, like this:

button.addEventListener("click", function() {
  button.parentNode.parentNode.removeChild(button.parentNode);
});

Here's a working example:

$(document).ready(function() {

  document.getElementById("add").addEventListener("click", function() {

    var taskinput = document.getElementById("task").value;

    if (taskinput) {

      var tasktext = document.createTextNode(taskinput);
      var list = document.createElement("li");
      list.appendChild(tasktext);
      var button = document.createElement("button");
      button.setAttribute("class", "completed");
      button.innerHTML = "X";
      button.addEventListener("click", function() {
        button.parentNode.parentNode.removeChild(button.parentNode);
      });
      list.appendChild(button);
      document.getElementById("task-to-do").appendChild(list);
      document.getElementById("task").value = " ";
    } else {
      alert("Please enter a task");
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <header>
    <h1>ENTER A TASK BELOW</h1>
    <input type="text" id="task"><img id="add" src="add.png" alt="img">

  </header>

  <div id="incomplete-tasks">
    <h4>TO-DO LIST</h4>
    <ul id="task-to-do">

    </ul>

  </div>

Alive to die - Anant · Accepted Answer · 2017-09-28T12:31:59.123

0

SInce you were created li abd button inside ul dynamically so bind the event through the reference with it's static parent(ul).

$('#task-to-do').on('click', "button.completed", function(){
   $(this).closest("li").remove();
});

Working fiddle:- https://jsfiddle.net/xn86cunw/

Reference:- jQuery event-delegation

Note:- traversal become less rather than doing through $(document).on(...).

edited Sep 28 '17 at 12:31

answered Sep 28 '17 at 11:52

Alive to die - Anant

70,531
10
51
98

2

Why not vote for duplicate when you know this has been asked hundreds of times – mplungjan Sep 28 '17 at 11:56
because already answers are given so marking duplicates is unnecessary.Since i have a better idea, so i shared that.Also i need three other persons help to mark an Question as duplicate, but meanwhile lot of answers are posted – Alive to die - Anant Sep 28 '17 at 11:56

parent element not removed with jquery click event

3 Answers3