delete each line after the click on Delete button-CodePudding

I wanted to delete each line after clicking its corresponding delete. I couldn't track the parent-child things. What is wrong in my code?

My HTML

    <div >
        <li> Apple <button>Delete</button></li>
        <li> Ball <button>Delete</button></li>
        <li> Cat <button>Delete</button></li>
        <li> Dog <button>Delete</button></li>
    </div>

let btn = document.querySelectorAll('button')
console.log(btn)
btn.forEach(element => {
    element.addEventListener("click", function(){
        console.log("Hi there boys.")
        let prnt = document.querySelectorAll('.li li')
        for(let i = 0; i<prnt.length;   i)
        {
            // console.log(prnt[i].parentNode.children)
            prnt.removeChild(prnt[i].parentNode.firstElementChild)
        }
    })
})

CodePudding user response：

You can just get the parent of the button, and then from the parent you can get the container. Then just remove the parent from the container.

let btns = document.querySelectorAll('button')
btns.forEach(element => {
  element.addEventListener("click", function() {
    const parent = element.parentElement;
    const container = parent.parentElement;
    container.removeChild(parent);
  })
})

<div >
  <li> Apple <button>Delete</button></li>
  <li> Ball <button>Delete</button></li>
  <li> Cat <button>Delete</button></li>
  <li> Dog <button>Delete</button></li>
</div>

CodePudding user response：

Seems you have made things complicated,just need to use element.parentNode.remove() can do it

let btns = document.querySelectorAll('button')
btns.forEach(element => {
    element.addEventListener("click", function(){
        element.parentNode.remove()
    })
})

<div >
        <li> Apple <button>Delete</button></li>
        <li> Ball <button>Delete</button></li>
        <li> Cat <button>Delete</button></li>
        <li> Dog <button>Delete</button></li>
    </div>