js动态增删div

  想做一个通过JS动态增删DIV的功能，因为DIV里还包含多个<dt>、<dd>元素，所以相对而言较复杂些。虽然网上资源很多，但都没有量身订做的，，搜集一些资料后，终于做出了令自己满意的效果。

 

JS代码：

<script. type="text/javascript">

function deleteitem(obj){
 obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}
</script>

 

JSP代码：

 

<div class="main" id="ver_id">
     <dl class="role_item">
      <dt class="role_item-tit">
       <span class="red txt-13">*</span> 版本号:
      </dt>
      <dd class="role_item-ct">
       <input name="versionNo" id="versionNo" size="20" type="text"
        class="role_name1" />
      </dd>
      <dd>
       <img class="_jia" src="${ctx }/Images/jia.png"
        onclick="additem()">
      </dd>
     </dl>

</div>

 

在版本号文本框的后面点击jia.png则会新增一个文本框，点击新增文本框后面的jian.png则会删除当前文本框；

 

obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);

第一部分：obj.parentNode.parentNode.parentNode指的是当前元素的父容器的父容器的父容器。也就是在这个元素外面第三层包裹他的那个元素

第二部分：removeChild(obj.parentNode.parentNode)指的是删除当前元素的父容器的父容器。也就是这个元素第二层包裹它的那个元素。

 

 

例子：

<div id="div1">

   <div id="div2">

     <div id="div3">

       <dt></dt>

       <dt></dt>

     </div>

   </div>

</div>

如果obj指的是dt元素，那么dt外面的第三层包裹它的就是div1，第二层包裹它的就是div2。按照上面的方法删除后就只剩下了

<div id="div1">

</div>