使用javascript动态添加和删除div_Javascript_Jquery_Html

使用javascript动态添加和删除div

javascript jquery html

使用javascript动态添加和删除div,javascript,jquery,html,Javascript,Jquery,Html,目前陷入困境。尝试创建一个表单，在该表单中可以在必要时动态添加和删除div元素，到目前为止，动态添加一直是一个难题，问题是如果我尝试删除div，则只有最后创建的才能删除，而其他人保留（不包括父div） <!doctype html> <html lang="en"> <head> </head> <body> <div id="box"> <div id='div' style="bac

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


学位级别：
博士學位
大师
学士学位
SSCE

校名
这可能是因为js认为您在执行操作时只选择了最后一个
var div=document.getElementById（div）
尝试执行循环，直到document.getElementById（divDiv）未定义
您正在将字符串div传递给您的remove element函数，该函数将只删除第一个div。
可以找到所有子元素，然后删除最后一个子元素
基于前面的代码，请参见下面的代码片段

var-box=document.getElementById（'box'），
template=box.getElementsByTagName（'div'），
模板=模板[0]；
控制台日志（模板）；
var计数器=1；
submit1=document.getElementById（“submit1”）；
submit1.onclick=函数（）{
var new_field=template.cloneNode（true）；
new_field.id=new_field.id+计数器++
console.log（新字段.id）
框.追加子项（新的_字段）；
返回false；
};
函数删除元素（boxDiv）{
var-box=document.getElementById（boxDiv）；
如果（框中的儿童）{
console.log（box.children）；
box.children[box.children.length-1].outerHTML=“”；
}
}

学位级别：
博士學位
大师
学士学位
SSCE

校名
您的问题在于行else if（document.getElementById（divDiv））
。这永远不会成立，因为你实际上没有比较任何东西。您可能正在寻找else if（模板）
。