deleting the parent of a parent that was appended to element

Question

I'm trying to create a button that will delete a div and it's contents after it has been appended to it's parent element. I've got some working code to add a group of elements, but I've become stuck on how to remove a group once it's been added. Here's what I've got so far:

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>

I know that the last function doesn't work, but I think it's close to what I need. What would I do to remove the same group of elements that I just added?

Answer 1

Instead of creating a fragment you can clone the div.The only issue(if it is issue) is that if some input is provided and then cloned the cloned div will have the same input.

To delete the current element you can use 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>

Answer 2

I believe you do not want to delete the first group of inputs. So remove the delete button from first pair of inputs. You can pass this to the function then try:

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 3

Just put this in the delete inputs function and remove it from there.

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>