Question

这是我的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);

Answer 1

deleteBtn.addEventListener("click", function() { 
  var box = document.getElementById("divBox");
  box.parentNode.removeChild(box);
});

Answer 2

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

deleteBtn.addEventListener("click", remove);

您已将注册表注释掉，以检查是否点击了newBtn()

中的删除按钮

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

我已更新了删除功能，以通过引用其newDiv()来访问id中创建的div。

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

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

2 个答案: