jQuery HTML结构的处理 3.删除和克隆结构_jquery移除html中某个特定结构-CSDN博客

本文链接：https://blog.csdn.net/laoma4102/article/details/8558756

删除结构也有两种方法：一是使用 empty()删除匹配元素包含的所有子节点。例如，在下面示例中将删除 div 元素内所有子节点和文本，返回“<div></div><div></div>”两个空标签。

注意：这里也会删除文本。<P>也是

<div>盒子</div>
<div><p>盒子</p></div>
<script language="javascript" type="text/javascript">
$("div").empty();
</script>

二是使用remove([expr])方法删除匹配的元素，或者符合表达式的匹配元素。例如，在下面示例中将删除div元素及其包含的子节点，函数最后返回的是“<p>段落文本3</p>”。

用这个语句alert($("div").remove().html());可以查看到，remove函数的返回值为删除的内容

<div>盒子1</div>
<div><p>段落文本2</p></div>
<p>段落文本3</p>
<script language="javascript" type="text/javascript">
$("div").remove();
</script>

结构复制主要使用 clone()和 clone(true)方法。clone()表示克隆匹配的 DOM 元素并选中克隆的元素。例如，在下面示例中，先使用 clone()方法克隆 div 元素，然后再把它插入到 p元素内。

<div οnclick="alert('Hello World')">盒子</div>

<p>段落</p>
<script language="javascript" type="text/javascript">
$("div").clone().appendTo("p");
</script>

最后插入结果为：

<div>盒子</div>
<p>段落<div>盒子</div></p>

clone(true)方法不仅能够克隆元素，而且还可以克隆元素所定义的事件。例如，在上面示例中如果为 div 元素定义一个 onclick 属性事件，则使用 clone(true)方法将会在克隆元素中也包含属性事件。

<div οnclick="alert('Hello World')">盒子</div>
<p>段落</p>
<script language="javascript" type="text/javascript">
$("div").clone(true).appendTo("p");
</script>

克隆的结果为：

<div οnclick="alert('Hello World')">盒子</div>
<p>段落<div οnclick="alert('Hello World')">盒子</div></p>

练习代码

$(function(){
	$("input[value='empty']").click(function(){
		//$("div").empty();
		//$("P").empty();
		$("div,p").empty();
	});
	$("input[value='remove']").click(function(){
		alert($("div").remove().html());
		alert($("P").remove().html());
	});
	$("input[value='clone']").click(function(){
		$("input[value='remove']").clone().insertAfter($(this));
		$("input[value='remove']:eq(0)").clone(true).insertAfter($(this));
	});
});

	<body>
		 <div>
		 	<p>aaa</p>
			<p>aaa</p>
			<p>aaa</p>
		 </div>
		 <div>8888888888</div>
		 <p>aaaadsdas</p>
		 <input type="button" name="123" value="empty" />
		 <input type="button" name="123" value="remove" />
		 <input type="button" name="123" value="clone" />
	</body>