我想从javascript中的动态创建按钮中删除动态创建的div。我被卡住了

问题描述 投票:0回答:2

这是我的JS代码。我用按钮创建了一个输入字段。单击按钮后,它将输出一个删除按钮和一个在JS中创建的div(卡片)。

我遇到的问题是定位删除按钮并删除div。一切都有效,除了最后一个功能remove()

let create = document.getElementById("create");
let input = document.getElementById("input");
let output = document.getElementById("output");

create.addEventListener("click", function(){
    document.getElementById("output").innerHTML = input.value;
    newBtn();
    newDiv();

});

function newBtn () {
    let deleteBtn = document.createElement("button");
    let box = document.createTextNode("Delete");
    deleteBtn.appendChild(box);
    document.body.appendChild(deleteBtn);
    //deleteBtn.addEventListener("click", remove.document.createElement("box"));
}

function newDiv () {
    let newDiv = document.createElement("div");
    newDiv.id = "divBox";
    newDiv.innerHTML = "made div";
    newDiv.style.height = "150px";
    newDiv.style.width = "500px";
    newDiv.style.backgroundColor = "red";
    document.body.appendChild(newDiv);
}

function remove (event) {
    let currentDiv = event.currentTarget.className;
    let removeCard = document.getElementById("currentDiv");
    deleteBtn.removeChild(removeCard);
javascript
2个回答
0
投票
deleteBtn.addEventListener("click", function() { 
  var box = document.getElementById("divBox");
  box.parentNode.removeChild(box);
});

0
投票

这是解决问题的小提琴。 Fiddle

deleteBtn.addEventListener("click", remove);

你已经注释掉了监听器,检查是否点击了newBtn()中的删除按钮

function remove(event) {
  let div = document.getElementById('divBox');
  document.body.removeChild(div);
}

我已经更新了remove函数,通过引用它的newDiv()来访问在id中创建的div。

请注意,每次单击newBtn()时,Create函数都会创建一个删除按钮。您可以在创建按钮之前检查该按钮是否存在。


推荐问答