删除与替换元素

作者：曾庆林

删除元素

以下方法可以从文档中删除指定的DOM元素，或从指定元素中删除所有子节点。

• remove()方法
• empty()方法

remove（）案例
html

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    $("button").click(function(){
        $("p:eq(0)").remove();
    })  
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>

<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

第一个p元素会被删除

empty（）案例
html

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    $("button").click(function(){
        $("p:eq(0)").empty();
    })  
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<p></p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

第一个p元素内容会被清空

替换元素

以下方法用来对DOM元素执行替换操作，即以新建元素或现有元素替换指定的目标元素。

• replaceWith()方法
• replaceAll()方法

replaceWith()案例
html

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    $("button").click(function(){
       $("p").replaceWith("<a>this is a </a>");
    })  
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>

所有的的p元素都会替换为a元素

replaceAll()案例
html

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    $("button").click(function(){
      $("<div>到碗里来</div>").replaceAll($("p"));
    })  
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<div>到碗里来</div>
<div>到碗里来</div>
<div>到碗里来</div>
<div>到碗里来</div>
<div>到碗里来</div>

所有的的p元素都会替换为a元素

复制元素

clone() 复制元素
clone(true) 复制元素并复制元素绑定的事件

clone() 案例
html

<button>按钮</button>

js

$(function(){
    $("button").click(function(){
        var btn=$(this).clone(true);
        //true 还会复制事件
        btn.insertAfter($(this));
    })  
})

单击任意按钮执行后的结果

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
...

所有的的p元素都会替换为a元素