动态添加和删除与div div div

目前陷入困境。试图创建一个表单，其中可以动态地添加和删除div元素，到目前为止一直到DYNAMICALLY ADD，问题是如果我尝试删除div，只有最后创建的获取删除，而其他人仍然（不包括父div ）KINDLY ASSIST。动态添加和删除与div div div

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

}

来源

2017-04-04 Iyke Uche

你的问题是与线'否则，如果该片段（的document.getElementById（divDiv））'。这永远不会成立，因为你实际上并没有比较任何东西。你可能在寻找'else if（template）'。 –

您传递字符串div您remove元素功能，只会删除第一个div。你可以找到所有的子元素，然后删除最后一个孩子

建立在你前面的代码，请参见下面

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>

来源

2017-04-04 22:59:06 repzero

谢谢，真的很感谢帮助！ –

欢迎好友：D – repzero

这可能是因为JS认为做

VAR的div =的document.getElementById（divDiv）当你只选择最后一个;

尝试做一个循环，直到的document.getElementById（divDiv）是未定义

来源

2017-04-04 22:42:00 UberFluff

动态添加和删除与div div div

回答

相关问题