删除附加到元素

Question

我正在尝试创建一个按钮，该按钮将在将div及其内容附加到其父元素之后将其删除。我有一些工作代码来添加一组元素，但是一旦添加一组元素，我就陷入了如何删除的困扰。这是到目前为止我得到的：

function createFrag(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

function addInputs (){

    var fragment = createFrag('<div class="input-container"><div><input type="text" id="input1" name="input1" placeholder="input 1"><input type="number" id="input2" name="input2" placeholder="input 2"></div><div><button type="button" class="btn add" onclick="return addInputs()">Add Input</button><button type="button" class="btn del" onclick ="deleteInputs()">Delete Input</button></div></div>');
    
    var div = document.createElement("div")
    div.classList.add("input-container")
    div.appendChild(fragment)
    document.getElementById('grandparent').appendChild(div);
}

function deleteInputs (event){
  var target = this.parentNode.parentNode
  document.removeChild(target)
}

<div id="grandparent">
  <div class="input-container">
    <div>
        <input type="text" id="input1" name="input1" placeholder="input 1">
        <input type="number" id="input2" name="input2" placeholder="input 2">
    </div>
    <div>
        <button type="button" class="btn add" onclick="return addInputs()">Add Input</button>
        <button type="button" class="btn del" onclick ="deleteInputs()">Delete Input</button>
    </div>
  </div>
</div>

我知道最后一个功能不起作用，但是我认为它已经接近我的需要。我该怎么做才能删除刚刚添加的同一组元素？

Answer 1

我相信您不想删除第一组输入。因此，请从第一对输入中删除按钮。您可以将this传递给该函数，然后尝试：

element.parentNode.parentNode.remove();

document.querySelector('.input-container > div > .del').remove();

function createFrag(htmlStr) {
  var frag = document.createDocumentFragment(),
      temp = document.createElement('div');
  temp.innerHTML = htmlStr;
  while (temp.firstChild) {
      frag.appendChild(temp.firstChild);
  }
  return frag;
}

function addInputs (){
  var fragment = createFrag('<div class="input-container"><div><input type="text" id="input1" name="input1" placeholder="input 1"><input type="number" id="input2" name="input2" placeholder="input 2"></div><div><button type="button" class="btn add" onclick="return addInputs()">Add Input</button><button type="button" class="btn del" onclick ="deleteInputs(this)">Delete Input</button></div></div>');

  var div = document.createElement("div")
  div.classList.add("input-container")
  div.appendChild(fragment);
  document.getElementById('grandparent').appendChild(div);
}

function deleteInputs (element){
  element.parentNode.parentNode.remove();
}

<div id="grandparent">
  <div class="input-container">
    <div>
        <input type="text" id="input1" name="input1" placeholder="input 1">
        <input type="number" id="input2" name="input2" placeholder="input 2">
    </div>
    <div>
        <button type="button" class="btn add" onclick="return addInputs()">Add Input</button>
        <button type="button" class="btn del" onclick ="deleteInputs()">Delete Input</button>
    </div>
  </div>
</div>

Answer 2

只需将this放在删除输入功能中，然后从那里删除。

function createFrag(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

function addInputs (){

    var fragment = createFrag('<div class="input-container"><div><input type="text" id="input1" name="input1" placeholder="input 1"><input type="number" id="input2" name="input2" placeholder="input 2"></div><div><button type="button" class="btn add" onclick="return addInputs()">Add Input</button><button type="button" class="btn del" onclick ="deleteInputs(this)">Delete Input</button></div></div>');
    
    var div = document.createElement("div")
    div.classList.add("input-container")
    div.appendChild(fragment)
    document.getElementById('grandparent').appendChild(div);
}

function deleteInputs (input){
  input.parentNode.parentNode.remove();
}

<div id="grandparent">
  <div class="input-container">
    <div>
        <input type="text" id="input1" name="input1" placeholder="input 1">
        <input type="number" id="input2" name="input2" placeholder="input 2">
    </div>
    <div>
        <button type="button" class="btn add" onclick="return addInputs()">Add Input</button>
        <button type="button" class="btn del" onclick ="deleteInputs(this)">Delete Input</button>
    </div>
  </div>
</div>

Answer 3

代替创建片段，您可以克隆div。唯一的问题（如果存在问题）是，如果提供了一些输入然后进行克隆，则克隆的div将具有相同的输入。

要删除当前元素，可以使用remove()

function addInputs(e) {
  var fragment = document.getElementsByClassName('input-container')[0]
  clonedDiv = fragment.cloneNode(fragment);
  document.getElementById('grandparent').appendChild(clonedDiv);
}

function deleteInputs(event) {
  var target = event.target.parentNode.parentNode.remove()
}

<div id="grandparent">
  <div class="input-container">
    <div>
      <input type="text" id="input1" name="input1" placeholder="input 1">
      <input type="number" id="input2" name="input2" placeholder="input 2">
    </div>
    <div>
      <button type="button" class="btn add" onclick="addInputs(event)">Add Input</button>
      <button type="button" class="btn del" onclick="deleteInputs(event)">Delete Input</button>
    </div>
  </div>
</div>