删除与替换元素
作者：曾庆林
删除元素
以下方法可以从文档中删除指定的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元素
