dynamically add and removing div with javascript

Question

presently stuck in situation. trying to create a form where one can dynamically add and remove div elements where necessary,so far have been a to DYNAMICALLY ADD, problem is if i try to REMOVE div,only the last created gets to delete whilst others remain(excluding the parent div)KINDLY ASSIST.

 <!doctype html>
 <html lang="en">
 <head>

 </head>
 <body>


   <div id="box">
     <div id='div' style="background: #99CCFF; height: 100px; width:300px" >       
  <p>Degree Level: <select id="dropdown">
            <option value="Doctorate Degree">Doctorate Degree</option>
            <option value="Masters">Masters</option>
            <option value="Bachelors Degree">Bachelors Degree</option>
            <option value="SSCE">SSCE</option>
        </select></p>    
<label for="firstname">School Name</label>                     
<input type="text" placeholder="Your Role"">  
<label for="from">From</label>
<input type="text" id="from" name="from">   
<br> 
<label for="to">to</label>
<input type="text" id="to" name="to">
</div>
</div>   
 <div>

<button id="submit1">Add new div</button>
 <input type="button" value="Remove Element"      
 onClick="removeElement('box','div');">
  </div>    
</body>



<script>
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
var counter = 1;
submit1.onclick = function () {
var new_field = template.cloneNode(true);
new_field.id = new_field.id + counter++
console.log(new_field.id)
box.appendChild(new_field);
return false;
};
</script>
<script>
function removeElement(boxDiv, divDiv){
 if (divDiv == boxDiv) {
      alert("The parent div cannot be removed.");
 }
 else if (document.getElementById(divDiv)) {     
      var div = document.getElementById(divDiv);
      var box = document.getElementById(boxDiv);
      box.removeChild(div);
 }
 else {
      alert("Child div has already been removed or does not exist.");
      return false;
 }

}

Your problem is with the line else if (document.getElementById(divDiv)). That's never going to hold true, because you're not actually comparing anything. You're probably looking for else if (template). — Obsidian Age
– Obsidian Age, Commented Apr 4, 2017 at 22:47

repzero · Accepted Answer · 2017-04-04 22:59:06Z

You are passing the string div to your remove element function which will only remove the first div. You can find all the children elements and then remove the last child

Building on your previous code, see the snippet below

var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
    console.log(template);
var counter = 1; 
submit1=document.getElementById("submit1");
submit1.onclick = function () {
var new_field = template.cloneNode(true);
new_field.id = new_field.id + counter++
console.log(new_field.id)
box.appendChild(new_field);
return false;
};
function removeElement(boxDiv){
      var box = document.getElementById(boxDiv);
      if(box.children){
        console.log(box.children);
        box.children[box.children.length-1].outerHTML="";
      }

}

   <div id="box">
     <div id='div' style="background: #99CCFF; height: 100px; width:300px" >       
  <p>Degree Level: <select id="dropdown">
            <option value="Doctorate Degree">Doctorate Degree</option>
            <option value="Masters">Masters</option>
            <option value="Bachelors Degree">Bachelors Degree</option>
            <option value="SSCE">SSCE</option>
        </select></p>    
<label for="firstname">School Name</label>                     
<input type="text" placeholder="Your Role"">  
<label for="from">From</label> 
<input type="text" id="from" name="from">   
<br>  
<label for="to">to</label>
<input type="text" id="to" name="to">
</div>
</div>   
 <div>

<button id="submit1">Add new div</button>
 <input type="button" value="Remove Element"      
 onClick="removeElement('box');">
  </div>

UberFluff · Accepted Answer · 2017-04-04 22:42:00Z

0

It might be because js thinks you're only selecting the last one when doing

var div = document.getElementById(divDiv);

Try doing a loop until document.getElementById(divDiv) is undefined

answered Apr 4, 2017 at 22:42

UberFluff

311 silver badge4 bronze badges

Collectives™ on Stack Overflow

dynamically add and removing div with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related