TypeError: Cannot read property 'parentElement' of undefined on .remove()

Question

I'm creating buttons dynamically with this function

function addFormFields() {
        i += 1
        const parentdiv = document.createElement('div')
        const delicon = document.createElement('i')
        const btndelete = document.createElement('button')
        const div = document.createElement('div')
        const container = document.getElementById('compinput')
        const selectprod = document.createElement('select')
        const inputqtd = document.createElement('input')
        delicon.setAttribute("class", "fas fa-trash-alt")
        btndelete.setAttribute("class", "btn btn-danger btn-sm")
        btndelete.setAttribute("type", "button")
        btndelete.setAttribute("onclick", "deletebtn()")
        div.setAttribute("class", "row justify-content-between col-md-12")

        inputqtd.setAttribute("class", "form-control col-md-4 mt-1")
        inputqtd.setAttribute("min", "0")
        inputqtd.setAttribute("max", "999")
        inputqtd.type = "number"
        inputqtd.name = "qtd[]"
        inputqtd.placeholder = " Quantidade"



        selectprod.setAttribute("class", "form-control col-md-6")
        selectprod.type = "text"
        selectprod.name = "prod[]"
        selectprod.placeholder = "Produtos que compoem"


        console.log(lista_prod)

        for (let i = 0; i < lista_prod.length; i++) {
            const opt = document.createElement('option');
            opt.value = lista_prod[i];
            opt.innerHTML = lista_prodname[i]
            selectprod.appendChild(opt)

        }

        btndelete.appendChild(delicon)
        div.appendChild(selectprod)
        div.appendChild(btndelete)
        parentdiv.appendChild(div)
        parentdiv.appendChild(inputqtd)
        container.appendChild(parentdiv)

        container.appendChild(document.createElement("br"))
    }

And adding to this buttons an onlick function called deletebtn like this :

function deletebtn(e) {
        e.parentElement.remove();
    }

What should happen:The delete buttonbtndelete should onclick delete his parentElement that is created dynamically too and it's called parentdiv, but when I try do delete that I receive the error like the title of the question, so it do not consider the dynamically created div as his parentElement, how can I perform that?

Answer 1

that's very simple

function deletebtn(e) {
    e.target.parentElement.remove()
}

Answer 2

Missing this event in deletebtn(this) btndelete.setAttribute("onclick", "deletebtn(this)") Run the code and confirm

var i=1;
var lista_prod=[1,2];
var lista_prodname =["dd",'ddd3']
function addFormFields() {
        i += 1
        const parentdiv = document.createElement('div')
        const delicon = document.createElement('i')
        const btndelete = document.createElement('button')
        const div = document.createElement('div')
        const container = document.getElementById('compinput')
        const selectprod = document.createElement('select')
        const inputqtd = document.createElement('input')
        delicon.setAttribute("class", "fas fa-trash-alt")
        btndelete.setAttribute("class", "btn btn-danger btn-sm")
        btndelete.setAttribute("type", "button")
        
        btndelete.innerHTML = 'delete';
        btndelete.setAttribute("onclick", "deletebtn(this)")
        div.setAttribute("class", "row justify-content-between col-md-12")

        inputqtd.setAttribute("class", "form-control col-md-4 mt-1")
        inputqtd.setAttribute("min", "0")
        inputqtd.setAttribute("max", "999")
        inputqtd.type = "number"
        inputqtd.name = "qtd[]"
        inputqtd.placeholder = " Quantidade"
        selectprod.setAttribute("class", "form-control col-md-6")
        selectprod.type = "text"
        selectprod.name = "prod[]"
        selectprod.placeholder = "Produtos que compoem"

  
        

        for (let i = 0; i < lista_prod.length; i++) {
            const opt = document.createElement('option');
            opt.value = lista_prod[i];
            opt.innerHTML = lista_prodname[i]
            selectprod.appendChild(opt)

        }

        btndelete.appendChild(delicon)
        div.appendChild(selectprod)
        div.appendChild(btndelete)
        parentdiv.appendChild(div)
        parentdiv.appendChild(inputqtd)
        container.appendChild(parentdiv)

        container.appendChild(document.createElement("br"))
    }
    
    
    
    function deletebtn(e) {
    debugger;
        e.parentElement.remove();
    }

<div id="compinput">
<button id="add" onclick="addFormFields()">add</button>

Answer 3

you already have parentdiv and delete button in the same scope. why don't you add the event handler like this :

btndelete.addEventListener("click",() => {
   container.removeChild(parentdiv);
});