javadriptでdivを動的に追加して削除します

現在状況が固まっています。私がdivを削除しようとすると、最後に作成されたものだけを削除して残りのものを残す（親divを除いて））KINDLY ASSIST。javadriptで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（テンプレート）'を探しているでしょう。 –

未定義になるまでループをやってみてください。あなたは（参照、

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が）あなたが最初のdivを削除しますあなたの削除要素関数に文字列 divを渡している

出典

2017-04-04 22:42:00 UberFluff

javadriptでdivを動的に追加して削除します

答えて

関連する問題