addEventListener dosnt work on elements created by other function

Question


let input = document.getElementById("input");
let menu = document.getElementById("menu");
let add = document.getElementById("addtask");
let inner = document.createElement("input");
let task = document.createElement("div");
let deleteBtn = document.createElement("button");
let btnDetails = document.createTextNode("Delete");
let content = document.createElement("p")

// HTML structure
task.appendChild(content);
task.appendChild(deleteBtn);
deleteBtn.appendChild(btnDetails)
// adding classes & ids
task.classList.add("task");
deleteBtn.id ="btn"

// events 

deleteBtn.addEventListener('click', del)  // the problem

add.onclick = function () {
  if (input.value !== undefined || input.value.length !== 0) {
    content.innerText = input.value;
    let cloned = task.cloneNode(true);
    if (input.value == ''){
      
    } else {
      menu.appendChild(cloned)
    }
  } else {
    console.log("empty");
  }
};


// the problem
function del() { 
  console.log("deleted")

I want to add event 'click' on the button created by the function (add.onclick) and addEventListener dosn't work... here is my pen : https://codepen.io/mahdtomar/pen/KKvEjOr i got it , thanks for everyone

Does this answer your question? [Attach event to dynamic elements in javascript](https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript) — Abdur-Rehman M, Nov 20 '21 at 16:59

score 0 · Accepted Answer · answered Nov 20 '21 at 17:05

You can make use of event delegation and using closest you can attach a single listener on the parent element

Note: You shouldn't use id for multiple elements. id should be used to identify only single element in DOM. You are misusing it

menu.addEventListener("click", e => {
  if(e.target.closest("button#btn")) {
    const elem = e.target.closest("div.task");
    elem.parentNode.removeChild(elem);
  }
})

let input = document.getElementById("input");
let menu = document.getElementById("menu");
let add = document.getElementById("addtask");

let inner = document.createElement("input");
let task = document.createElement("div");
let deleteBtn = document.createElement("button");
let btnDetails = document.createTextNode("Delete");
let content = document.createElement("p");

// HTML structure
task.appendChild(content);
task.appendChild(deleteBtn);
deleteBtn.appendChild(btnDetails);
// adding classes & ids
task.classList.add("task");
deleteBtn.id = "btn";

menu.addEventListener("click", e => {
  if (e.target.closest("button#btn")) {
    const elem = e.target.closest("div.task");
    elem.parentNode.removeChild(elem);
  }
})

add.onclick = function() {
  if (input.value !== undefined || input.value.length !== 0) {
    content.innerText = input.value;
    let cloned = task.cloneNode(true);
    if (input.value == "") {} else {
      menu.appendChild(cloned);
    }
  } else {
    console.log("empty");
  }
};

.container {
  max-width: 653px;
  display: block;
  margin: 50px auto;
}

form {
  background-color: #ddd;
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

form input {
  border: none;
  max-width: 550px;
  min-width: 300px;
  width: 500px;
  height: 50px;
  padding: 1px 10px;
  font-size: 20px;
  border-radius: 20px;
}

form input::placeholder {
  padding-left: 10px;
}

form div {
  background-color: red;
  padding: 15px;
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  margin-left: 20px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.menu {
  background-color: #ddd;
  margin-top: 40px;
  width: 100%;
  padding: 20px;
}

.task {
  display: flex;
  color: black;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
  background-color: white;
}

.task p {
  width: 85%;
  padding: 10px;
}

.task button {
  height: 38px;
  margin-right: 20px;
}

<div class="container">
  <form action="">
    <input id="input" type="text" name="input" placeholder="Write A Task" />
    <div id="addtask">Add Task</div>
  </form>
  <div class="menu" id="menu"></div>
</div>

Maik Lowrey · Answer 2 · 2021-11-20T17:13:07.923

Your code looks good so far. Two small notes:

Dont use id for the delete Buttons. because id is only for unique elements.
deleteBtn.setAttribute("onclick", "del()"); would be work

let input = document.getElementById("input");
let menu = document.getElementById("menu");
let add = document.getElementById("addtask");
let inner = document.createElement("input");
let task = document.createElement("div");
let deleteBtn = document.createElement("button");
let btnDetails = document.createTextNode("Delete");
let content = document.createElement("p")

// HTML structure
task.appendChild(content);
task.appendChild(deleteBtn);
deleteBtn.appendChild(btnDetails)
// adding classes & ids
task.classList.add("task");

deleteBtn.setAttribute("class", "btn");

// events 
//deleteBtn.addEventListener('click', del) 
deleteBtn.setAttribute("onclick", "del(this)");

add.onclick = function () {
  if (input.value !== undefined || input.value.length !== 0) {
    content.innerText = input.value;
    let cloned = task.cloneNode(true);
    if (input.value == ''){
      
    }else{
      menu.appendChild(cloned)
    }
  } else {
    console.log("empty");
  }
};

function del(e) {
  e.parentNode.outerHTML = ''
  console.log("deleted")
}

.container{
    max-width: 653px;
    display: block;
    margin: 50px auto;
}
form{
    background-color: #ddd;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
form input{
    border: none;
    max-width: 550px;
    min-width: 300px;
    width: 500px;
    height: 50px;
    padding: 1px 10px;
    font-size: 20px;
    border-radius: 20px;
}
form input::placeholder{
    padding-left: 10px;
}
form div{
    background-color: red;
    padding: 15px;
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    margin-left: 20px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.menu{
    background-color: #ddd;
    margin-top: 40px;
    width: 100%;
    padding: 20px;

}
.task{
    display: flex;
    color:black;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
    background-color: white;
}
.task p{
    width: 85%;
    padding: 10px;
}
.task button{
    height: 38px;
    margin-right: 20px;

}

 <div class="container">
      <form action="">
        <input id="input" type="text"  name="input" placeholder="Write A Task" />
        <div id="addtask">Add Task</div>
      </form>
      <div class="menu" id="menu"></div>
    </div>

score 0 · Answer 3 · answered Nov 20 '21 at 17:15

0

try this:

document.addEventListener('click', function (e) {
    if (e.target.id == 'btn') {
        console.log("deleted")
    }
}, false);

answered Nov 20 '21 at 17:15

AnC Dev

141
12

addEventListener dosnt work on elements created by other function

3 Answers3