亲宝软件园·资讯

展开

JS删除元素

CNBLOG 人气:3

JS中如何删除某个父元素下的所有子元素?这里我介绍几种方法:

1.通过元素的 innerHTML 属性来删除

  这种方式我觉得是最有方便的,直接找到你想要的父元素,直接令其 element.innerHTML = "";

  举例说明:

<input type="button" value="按钮" id="btn">
<div id="dv">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
<script>
  document.getElementById("btn").onclick = function () {
    document.getElementById("dv").innerHTML = "";
  }
</script>

2.通过 removeChild() 方法来删除

  removeChild() 的用法是先找到父级元素parent,然后调用 parent.removeChild(thisNode) 来删除当前子节点(thisNode),那我们只要循环遍历删除所有的即可。

  举例说明:

<input type="button" value="按钮" id="btn">
<div id="dv">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
<script>
  document.getElementById("btn").onclick = function () {
    // 获取 div 标签
    var div = document.getElementById("dv");
    // 获取 div 标签下的所有子节点
    var pObjs = div.childNodes;
    for (var i = pObjs.length - 1; i >= 0; i--) { // 一定要倒序,正序是删不干净的,可自行尝试
      div.removeChild(pObjs[i]);
    }
  }
</script>

注意:循环遍历的时候一定要倒序,因为正序的时候,当你把索引为0的子节点删除后,那么原来索引为1的就变成了0,而这时变量 i 已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,结果就是最后只删除了一半的节点,朋友们可自行尝试理解一下。

3.通过 jQuery 中 empty() 方法来删除

  语法:

     $(selector).empty()

  举例说明:

<input type="button" value="按钮" id="btn">
<div id="dv">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
  $("#btn").click(function () {
    $("#dv").empty();
  })
</script>

加载全部内容

相关教程
猜你喜欢
用户评论