Question

目前陷入困境。尝试创建一个表单，其中一个可以动态添加和删除必要的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;
 }

}

Answer 1

您正在将字符串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>

Answer 2

这可能是因为js认为你在做

时只选择了最后一个

var div = document.getElementById（divDiv）;

尝试执行循环，直到document.getElementById（divDiv）未定义

使用javascript动态添加和删除div

2 个答案: