jQuery - 删除元素

Posted 疯子范儿的设计

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery - 删除元素相关的知识,希望对你有一定的参考价值。

删除元素/内容

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

  • remove() - 删除被选元素(及其子元素)

  • empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script >

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").remove();

  });

});

</script>

</head>

<body>


<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">


这是 div 中的一些文本。

<p>这是在 div 中的一个段落。</p>

<p>这是在 div 中的另外一个段落。</p>


</div>

<br>

<button>移除div元素</button>


</body>

</html>

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script >

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").empty();

  });

});

</script>

</head>

<body>


<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">


这是 div 中的一些文本。

<p>这是在 div 中的一个段落。</p>

<p>这是在 div 中的另外一个段落。</p>


</div>

<br>

<button>清空div元素</button>


</body>

</html>

过滤被删除的元素

jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script >

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").remove(".italic");

  });

});

</script>

</head>

<body>


<p>这是一个段落。</p>

<p class="italic"><i>这是另外一个段落。</i></p>

<p class="italic"><i>这是另外一个段落。</i></p>

<button>移除所有  class="italic" 的 p 元素。</button>


</body>

</html>


以上是关于jQuery - 删除元素的主要内容,如果未能解决你的问题,请参考以下文章

jquery怎么删除第一个子元素

jQuery - 删除元素:删除已有的 HTML 元素

jquery怎么删除第一个子元素

jQuery 删除元素

jquery怎麽删除数组中元素

jquery 动态添加的元素 怎么删除元素