動態添加和刪除與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

回答

相關問題