Adding event listeners to
that are created using javascript

Question

I am quite new to manipulating elements in the DOM in JS so I am creating a simple to do list to get more comfortable and where I can add items using the input and remove items by clicking on the list item. ALthough this may not be best practice and limitting I am just wanting to use create and remove elements rather than using objects or classes until I get more familar, also using plain/vanilla js so please keep this in mind when answering.

I am trying to add a click event which removes the <li> when the <li> is clicked.

My logic is... When the page is loaded I can't just run a for loop over all of the <li>s and add event handlers as all of the <li>'s do not exist yet. So my attempted solution is when the addTaskButton event is triggered, we get all of the <li> that are on the page at the time of the event, we loop through all of them and add an eventlistener to <li>'s that are waiting to be removed when clicked.

This doesn't seem to work and may be overly complicated.

Can someone please explan to me very simply like I'm 5 why this doesn't work or what a better way to do this would be?

Thank you in advance

HTML

<ul id="taskList">
    <li>example</li>

</ul>
<input type="text" id="addTaskInput">
<button id="addTaskButton">Add Task</button>

JavaScript

const taskList = document.querySelector("#taskList");
const addTaskInput = document.querySelector("#addTaskInput");
const addTaskButton = document.querySelector("#addTaskButton");
let taskItem = document.querySelectorAll("li");


addTaskButton.addEventListener("click", () => {
    let taskItem = document.createElement("li");
    taskItem.textContent = addTaskInput.value;
    for (let i = 0; i < taskItem.length; i++) {     
        taskItem[i].addEventListener("click", () => {
            let taskItem = document.querySelectorAll("li");
            taskList.removeChild(taskItem[i]);      
        });
    }
    taskList.appendChild(taskItem);
    addTaskInput.value = " ";
});

Ready about this method https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload. — Lalit, Sep 04 '17 at 06:36
Possible duplicate of [add event listener on elements created dynamically](https://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically) — adiga, Sep 04 '17 at 06:38
@adiga this isn't the answer I'm looking for, also doesn't work with my problem — DumbDevGirl42069, Sep 04 '17 at 06:44

Ananthakrishnan Baji · Accepted Answer · 2017-09-04T06:56:12.710

Here is code i created for your requirement, this implement jQuery $(document).on mechanism in vanilla javascript, now where ever you create an li inside the document, on clicking that li it will be removed.

Explaination

What it does is on clicking the document it checks on which element is clicked (e.target is the clicked element, e is is the click event on document), then checks if the clicked item is an li tag (e.target.tagName will tell us the tag name if the item clicked), so if it is an li just remove it;

 const taskList = document.querySelector("#taskList");
 const addTaskInput = document.querySelector("#addTaskInput");
 const addTaskButton = document.querySelector("#addTaskButton");


 addTaskButton.addEventListener("click", () => {
     let taskItem = document.createElement("li");
     taskItem.textContent = addTaskInput.value;
     taskList.appendChild(taskItem);
     addTaskInput.value = " ";
 });

 document.onclick = function(e)
 {
   if(e.target.tagName == 'LI'){
      e.target.remove();
    }
 }

<ul id="taskList">
    <li>example</li>

</ul>
<input type="text" id="addTaskInput">
<button id="addTaskButton">Add Task</button>

document.onclick = function(e) { if(e.target.tagName == 'LI'){ e.target.remove(); } } Can you please explain how this works? As e isn't a function that is defined? — DumbDevGirl42069, Sep 04 '17 at 06:52

Anthony McGrath · Answer 2 · 2017-09-04T06:48:15.530

0

Update your for loop like so:

for (let i = 0; i < taskItems.length; i++) {     
    taskItems[i].addEventListener("click", () => 
        taskList.removeChild(taskItems[i]);      
    });
}

Also your initial taskItem variable should be taskItems and is reflected in the for loop above.

edited Sep 04 '17 at 06:48

answered Sep 04 '17 at 06:37

Anthony McGrath

792
5
7

score 0 · Answer 3 · answered Sep 06 '17 at 08:16

taskList.addEventListener("click", (event) => {
     event.target.remove();
});

When the specified event occurs the event object is returned. The event object has several properties, one of them being target which is the element which is the element which the event occured on. event.target is returned to us and we are applying the remove() method to event.target

because of event "bubbling" or "Event Propagation", we can attach the event handler to an ancestor. It's best to attach the event listener to the closest ancestor element that is always going to be in the DOM (won't be removed).

When an event is triggered-in this case the "click" event. All decending elements will be removed - which in our case as there are only <li>'s this would be fine. But we should be more specific as in a different case we could be attaching this event handler to a div which has several different elements.

To do this we add an if condition to check that the tagName is an <li>

if (event.target.tagName == "LI")

note that the element must be calpitalised

Solution is as follows

taskList.addEventListener("click", (event) => {

      if(event.target.tagName == "LI"){
         event.target.remove();
    }});

Adding event listeners to that are created using javascript

3 Answers3

Adding event listeners to
that are created using javascript