2

I've Created element 'li' and appended two other elements(div and button) in it by creating them too.. Now when it is appended in the DOM, I want it to also dynamically be deleted when clicking Delete button, also I've grabbed all those buttons in btnid variable through which that 'li' item is to be deleted but Now I'm not getting How would I addEventListener to those buttons, If I normally add btnid.addEvent....... then it throws error coz it isn't defined yet as there's no element until an element is added dynamically.

let input = document.querySelector('#addinput') let btn = document.querySelector('#addbtn') let listcontainer = document.querySelector('#listcontainer') let btnid; btn.addEventListener('click', () => { let inpVal = input.value if (inpVal.length != 0) { let html = `<li class="margin5pxall pad5pxall"><div>${inpVal}</div><button class="btn delete">Delete</button>` listcontainer.innerHTML += html btnid = listcontainer.getElementsByTagName('button') console.log(btnid); input.classList.remove('red') } else { input.classList.add('red') } })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="mainBox flecCol bordernRad"> <div class="flexCol margin5pxall bordernRad mainHead"> <h1 class="textAlign head margin5pxall">Book List</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" placeholder="Search"> <button class="btn">Search</button> </div> </div> <div class="list margin5pxall bordernRad"> <ul id="listcontainer"></ul> </div> <div class="flexCol bordernRad margin5pxall lastHead"> <h1 class="textAlign head margin5pxY">Add a New Book</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" id="addinput" placeholder="Book Name"> <button class="btn" id="addbtn">Add</button> </div> </div> </div> </body> <script src="index.js"></script> </html>

Improve this question

2 Answers 2

Reset to default
1

You can simply use parentElement and remove with an onclick function to your delete button. This way only the item you clicked will be removed.

In the onclick() function this refers to as which element we have clicked on

Run snippet below to see it working.

let input = document.querySelector('#addinput') let btn = document.querySelector('#addbtn') let listcontainer = document.querySelector('#listcontainer') let btnid; btn.addEventListener('click', () => { let inpVal = input.value if (inpVal.length != 0) { let html = `<li class="margin5pxall pad5pxall"><div>${inpVal}</div><button class="btn delete" onclick="removeItem(this)">Delete</button>` listcontainer.innerHTML += html //clear input input.value = '' //Add class input.classList.remove('red') } else { input.classList.add('red') } }) //Remove Item function removeItem(event) { event.parentElement.remove() }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="mainBox flecCol bordernRad"> <div class="flexCol margin5pxall bordernRad mainHead"> <h1 class="textAlign head margin5pxall">Book List</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" placeholder="Search"> <button class="btn">Search</button> </div> </div> <div class="list margin5pxall bordernRad"> <ul id="listcontainer"></ul> </div> <div class="flexCol bordernRad margin5pxall lastHead"> <h1 class="textAlign head margin5pxY">Add a New Book</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" id="addinput" placeholder="Book Name"> <button class="btn" id="addbtn">Add</button> </div> </div> </div> </body> <script src="index.js"></script> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks a lot, I'm a newbie in javascript so i was having a problem
@SamarthMittal No worries. Would you mind upvotting the answer if i have helped you. Thanks
1

You can use document.createElement to add the elements instead, on which you can add event listeners.

const li = document.createElement('li'); li.className = "margin5pxall pad5pxall"; const div = document.createElement('div'); div.textContent = inpVal; const delBtn = document.createElement('button'); delBtn.className = "btn delete"; delBtn.textContent = "Delete"; li.appendChild(div); li.appendChild(delBtn); delBtn.addEventListener("click", function(e){ listcontainer.removeChild(li); }); listcontainer.appendChild(li);

Demo:

let input = document.querySelector('#addinput') let btn = document.querySelector('#addbtn') let listcontainer = document.querySelector('#listcontainer') let btnid; btn.addEventListener('click', () => { let inpVal = input.value if (inpVal.length != 0) { const li = document.createElement('li'); li.className = "margin5pxall pad5pxall"; const div = document.createElement('div'); div.textContent = inpVal; const delBtn = document.createElement('button'); delBtn.className = "btn delete"; delBtn.textContent = "Delete"; li.appendChild(div); li.appendChild(delBtn); delBtn.addEventListener("click", function(e){ listcontainer.removeChild(li); }); listcontainer.appendChild(li); input.classList.remove('red') } else { input.classList.add('red') } })
<div class="mainBox flecCol bordernRad"> <div class="flexCol margin5pxall bordernRad mainHead"> <h1 class="textAlign head margin5pxall">Book List</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" placeholder="Search"> <button class="btn">Search</button> </div> </div> <div class="list margin5pxall bordernRad"> <ul id="listcontainer"></ul> </div> <div class="flexCol bordernRad margin5pxall lastHead"> <h1 class="textAlign head margin5pxY">Add a New Book</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" id="addinput" placeholder="Book Name"> <button class="btn" id="addbtn">Add</button> </div> </div> </div>

Improve this answer

1 Comment

Thanks a lot, I'm a newbie in javascript so i was having a problem

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.