Question

我试图在单击某些按钮时添加新的输入和按钮。

<div class="form-group row">
    <label>...</label>
    <div class="col-sm-9 input-group" id="aa">
        <input class="form-control mr-2" id="bbb" name="bbb" required type="text">
        <div class="input-group-append">
           <button type="button" class="btn btn-block btn-outline-info float-right" onclick="add()">Add</button>
        </div>
     </div>
</div>

这是我的问题。

通过单击按钮，我想在input（id =“ aa”）下添加相同的输入和按钮。每次单击新按钮时，我想再次添加新输入和按钮。
- 我试图通过使用insertAdjacentHTML来解决。但这需要很长的全新代码。所以想知道是否有更简单的方法来添加新的输入和按钮。
※我要添加的代码

<div class="col-sm-9 input-group" id="aa"> <input class="form-control mr-2" id="bbb" name="bbb" required type="text"> <div class="input-group-append"> <button type="button" class="btn btn-block btn-outline-info float-right" onclick="add()">Add</button> </div> </div>
下一步，我尝试将添加按钮更改为单击新输入和按钮时删除按钮。可以使用删除方法。但是我需要每个id的新输入和按钮。因此，想知道是否存在每次添加新输入和按钮时都将不同的id分配给新输入和按钮的特定方法吗？

希望有人至少可以告诉我我可以参考的地方。

Answer 1

请勿使用ID，请使用相对地址，parentNode，最接近的地址等。请使用cloneNode获取要复制的内容

注意，您确实需要“新的长代码”

window.addEventListener("load",function() {
  document.addEventListener("click",function(e) { // delegation
    var elem = e.target;
    if (elem.className.indexOf("btn") == 0) {
      var div = elem.closest("div.form-group");
      if (elem.innerText=="Add") {
        var newDiv = div.cloneNode(true);  // deep cloning
        newDiv.querySelector(".btn").innerText="Del";
        // here you may want to rename the input field too
        div.parentNode.appendChild(newDiv);
      }
      else {
        div.parentNode.removeChild(div);
      }
    }
  });
});

<div class="form-group row">
    <label>...</label>
    <div class="col-sm-9 input-group">
        <input class="form-control mr-2" name="bbb" required type="text">
        <div class="input-group-append">
           <button type="button" class="btn btn-block btn-outline-info float-right">Add</button>
        </div>
     </div>
</div>

更好的编码方式，而不是将整个新代码与`insertAdjacentHTML`一起使用

1 个答案: