删除附加到element的父级的父级

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>