JS、JQ中remove()、empty

最新推荐文章于 2023-08-04 15:09:57 发布

转载最新推荐文章于 2023-08-04 15:09:57 发布 · 2.5k 阅读

文章标签：

#javascript

JS、JQ 专栏收录该内容

10 篇文章

订阅专栏

在JQ中的，要用到移除指定元素的时候，发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。

empty()是只移除了指定元素中的所有子节点，拿$("p").empty()来说，他只是把<p>dsfsd</p>中的文本给移除了，而留下了<p></p>,仍保留其在dom中所占的位置。

remove([expr])则是把其从dom中删除，而不会保留其所占的位置。
例:
<p>Hello</p>
World
<p class='wel'>welcome</p>
执行$("p").empty()其结果是
<p></p>
World
<p></p>

执行$("p").remove()其结果是
World

执行$("p").remove(".wel")其结果是
<p>Hello</p>
World

在JS中实现移除某一元素时

1、remove（）方法是将某一元素在DOM中移除

<p>Hello</p>
World

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

执行p.remove()其结果是

World

2、还可以是删除下拉菜单中选择的某一项

<html>
<head>
<script type="text/javascript">
function removeOption(){
var x=document.getElementById("mySelect");

//selectIndex:是select标签的一个属性，获取目前选取的那个option的下标（下标从0开始），所以remove（）方法里面的参数也可以直接写需要删除的option的下标
x.remove(x.selectedIndex);
}
</script>
</head>
<body>

<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onclick="removeOption()" value="删除被选的选项">
</form>

</body>
</html>