使用“createElement”创建按钮时执行按钮的 onclick 属性答案

【问题标题】：onclick property of button is executed when button is created with "createElement"使用“createElement”创建按钮时执行按钮的 onclick 属性
【发布时间】：2021-05-11 05:49:26
【问题描述】：

我的网页上有一个执行“AddBox()”函数的按钮。此函数创建一个名为“box”的 div，并在该 div 中创建其他元素，如（另一个）div、标签、输入和按钮。每次创建“盒子”时，都会获得一个唯一的 id，即“box1”、“box2”、“box3”、...

现在我需要一种方法来删除某个框。在每个盒子中，我还创建了一个按钮，作为移除盒子的一种方式。该按钮称为“buttonRemove”。删除框的函数称为“removeBox()”。

我试图在创建按钮时将“removeBox()”作为 onclink 属性。然而，这个函数在创建时也会被执行。

如何将“removeBox()”函数赋予“removeBox”按钮，以便我可以添加多个“框”并删除单击“删除”按钮的框。

var count = 0;

function addBox() {

  count++

  var box = document.createElement("div");
  box.id = "box" + count;

  var stepTitle = document.createElement("h2")
  stepTitle.innerText = "Title " + count;

  var divName = document.createElement("div");
  divName.className = "fields";
  var labelName = document.createElement("label");
  labelName.htmlfor = "Name";
  labelName.innerHTML = "Name";
  var inputName = document.createElement("input");
  inputName.type = "text";
  inputName.name = "Name";
  inputName.id = "Name";

  var buttonRemove = document.createElement("button");
  buttonRemove.innerText = "Remove box" + count +" with Title "+count;
  buttonRemove.type = "button";
  
 
  divName.appendChild(labelName);
  divName.appendChild(inputName);

  box.appendChild(stepTitle);
  box.appendChild(divName);
  box.appendChild(buttonRemove)

  document.getElementById("container").appendChild(box);
}

function removeBox(){
       document.getElementById().remove(); 
}

.fields {
  display: flex;
  flex-direction: row;  
}

label {
  flex-basis: 10rem;
}

input{
  width: 50%;
}

<body>
    <button type="button" onclick="addBox()">Add box</button>
    <div id="container"></div>
</body>

【问题讨论】：

这样做：function removeBox(num) { document.getElementById('box'+num).remove() }

标签： javascript html jquery

【解决方案1】：

您只需要给按钮一个click 事件处理程序，它可以定位它所在的祖先div 并将其删除。

注意事项：

远离提供元素ids。一开始它们看起来很容易，但随着代码变得越来越复杂，它们使代码更难扩展并且变得难以维护。在下面的工作代码中，请注意我已经从元素中删除了 id 并更改了 label 以便 input 是它的子元素，这消除了对 for 属性的需要（它依赖于在id)。总的来说，代码比较简单。

使用.textContent 代替.innerText，因为.textContent 是W3C 标准，而.innerText（虽然无处不在并且在所有地方都受支持，但它是WHATWG，但不是W3C 标准）。

var count = 0;

function addBox() {

  count++

  var box = document.createElement("div");

  var stepTitle = document.createElement("h2")
  stepTitle.textContent = "Title " + count;

  var divName = document.createElement("div");
  divName.className = "fields";
  
  var labelName = document.createElement("label");
  labelName.textContent = "Name";
  
  var inputName = document.createElement("input");
  inputName.type = "text";
  inputName.name = "Name";
  
  // By nesting a form field within a label, they automatically
  // become associated without the need for the "for" attribute
  // and therefore any id.
  labelName.appendChild(inputName);

  var buttonRemove = document.createElement("button");
  buttonRemove.textContent = "Remove box" + count +" with Title "+count;
  buttonRemove.type = "button";
  
  // Give the remove button a click event handler
  buttonRemove.addEventListener("click", function(event){
    // Find the nearest div ancestor and remove it.
    this.closest("div").remove();
  });
  
 
  divName.appendChild(labelName);

  box.appendChild(stepTitle);
  box.appendChild(divName);
  box.appendChild(buttonRemove)

  document.getElementById("container").appendChild(box);
}

function removeBox(){
       document.getElementById().remove(); 
}

.fields {
  display: flex;
  flex-direction: row;  
}

label {
  flex-basis: 10rem;
}

input{
  width: 50%;
}

<body>
    <button type="button" onclick="addBox()">Add box</button>
    <div id="container"></div>
</body>

【讨论】：