网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

jQuery中remove()和empty()方法有什么区别?

2021/9/20 22:13:30

jQuery中删除元素和内容,一般可使用以下两个方法: 1、remove() 2、empty() 我们通过两个例子来说明一下两个方法的区别。<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery中remove()和e…

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

        1、remove() 

        2、empty()

        我们通过两个例子来说明一下两个方法的区别。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery中remove()和empty()方法有什么区别?www.woaidaogu.com</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</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;">
<p>风萧萧兮易水寒,壮士一去兮不复还。</p>
<p>探虎穴兮入蛟宫,仰天呼气兮成白虹。</p>
</div>
<br>
<button>移除该诗句</button>
</body>
</html>

image.png

        当我们点击“移除该诗句”按钮后,如下图所示:

image.png

        以上使用remove()方法删除被选元素及其子元素。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery中remove()和empty()方法有什么区别?www.woaidaogu.com</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</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;">
<p>风萧萧兮易水寒,壮士一去兮不复还。</p>
<p>探虎穴兮入蛟宫,仰天呼气兮成白虹。</p>
</div>
<br>
<button>移除该诗句</button>
</body>
</html>

image.png

        当点击了“移除该诗句”按钮后,如下图所示:

image.png


        以上使用empty()方法从被选元素中删除子元素,而remove()方法删除被选元素及其子元素。

        通过以上内容我们知道了jQuery中remove()和empty()方法的区别,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...