【jQuery学习笔记-----DOM---删除元素】

DOM---删除元素

jQuery支持两种删除元素的方法：remove()和empty()，而DOM仅定义了与jQuery的remove()方法对应的removeChild()方法

 

jQuery实现

remove()	从DOM中删除所有匹配的元素。
empty()	删除匹配的元素集合中所有的子节点

 

remove()方法能够删除匹配的元素，并返回这个被删除的元素，因此在特定条件下该方法的功能可以使用jQuery的appendTo()、prependTo()、insertBefore()或insertAfter()方法进行模拟。例如，下面的示例将将元素div的子元素p移出，然后插入到父元素div的后面：

<div><p>段落文本</p><div>

var $p = $(“p”).remove();

     $p.insertAfter(“div”);

//如果使用insertAfter()方法，则可以把上面的两步操作合并为一步

$(“p”).insertAfter(“div”);//直接把段落文本移动到div元素后面。

 

javascript实现remove()

DOM内置了removeChild()方法，该方法可以删除指定的节点及其包含的所有子节点，并返回这些删除的内容。因此，jQuery的remove()实际上是简单包装了DOM的removeChild()方法。：

    var div = document.getElementsByTagName(“div”)[0];//选择div元素

var p = document.getElementsByTagName(“p”)[0];

var p1 = div.removeChild(p); //移出p元素

div.parentNode.insertBefore(p1,div.nextSibling); //把移出的p元素附加到div元素后面。

     由于DOM的insertBefore()与appendChild()方法都具有破坏性，当使用文档中的现有元素进行操作时，会先删除原位置的元素，因此对于下面的两行代码：

var p1 =div.removeChild(p);

div.parentNode.insertBefore(p1,div.nextSibling);

合并为：

div.parentNode.insertBefore(p,div.nextSibling);//直接使用insertBefore()移动元素。

javascript自定义empty()方法

使用之前定义的DOMExtend工具：

   DOMExtend(“empty”,function(){

       var _this = this;

       var a = []; //

        for(var i=0,c=_this.childNodes,l=c.length,i<l;i++){

                 a.push(_this.removeChild(c[0]));  //把删除的子节点存储到临时数组中

         }

          return a; //返回被删除的子节点数组

   })