CODEWITHSUNDEEP
javascriptjqueryhtml
Iyke Uche
Iyke Uche

Reputation: 15

dynamically add and removing div with javascript

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;
 }

}

Upvotes: 1

Views: 156

Answers (2)

repzero
repzero

Reputation: 8412

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>

Upvotes: 1

UberFluff
UberFluff

Reputation: 31

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

Upvotes: 0

Related Questions