Question

我正在使用此功能动态创建按钮

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

并在此按钮上添加一个名为deletebtn的onlick函数，如下所示：

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

应该发生什么：删除按钮btndelete应该onclick删除其动态创建的父元素parentdiv，但是当我尝试这样做时删除我收到的错误，例如问题的标题，因此它不将动态创建的div视为其parentElement，我该如何执行呢？

Answer 1

您已经在同一作用域中具有parentdiv和delete按钮。为什么不添加这样的事件处理程序：

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

Answer 2

在 deletebtn（this）中缺少此事件 btndelete.setAttribute("onclick", "deletebtn(this)") 运行代码并确认

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

那很简单

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

TypeError：无法读取.remove（）上未定义的属性“ parentElement”

3 个答案: