javascript - 删除附加到元素的父级的父级

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>

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

标签： javascripthtml

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>