How Do I Delete created and appended element now

Question

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 = `${inpVal}
`
        listcontainer.innerHTML += html
        btnid = listcontainer.getElementsByTagName('button')
        console.log(btnid);
        input.classList.remove('red')
    } else {
        input.classList.add('red')
    }
})





    
    
    Document
    



    
        
            Book List
            
                
                
            
        
        
            
        
        
            Add a New Book

user_9513184 · Answer

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')
    }
})


  
    Book List
    
      
      
    
  
  
    
  
  
    Add a New Book

user_13669048 · Answer

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 = `${inpVal}
`
    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()
}





  
  
  Document
  



  
    
      Book List
      
        
        
      
    
    
      
    
    
      Add a New Book

How Do I Delete created and appended element now

2 Answers