jQuery - 删除元素
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/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:200px;border:1px solid black;background-color:pink;">
你好
<p>你很好</p>
<p>你太好了</p>
</div>
<br>
<button>移除</button>
</body>
</html>empty() 方法
jQuery empty() 方法删除被选元素的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/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:200px;border:1px solid black;background-color:yellow;">
你好
<p>你很好</p>
<p>你太好了</p>
</div>
<br>
<button>清空</button>
</body>
</html>过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</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>
neue Datei
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("input:button").click(function() {
$("input:checkbox:checked").next().nextAll().remove();
});
})
</script>
<style type="text/css">
div.box{width:300px;height:200px;padding:10px 20px;border:4px dashed #ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;height:100px;margin:10px 0;border:1px solid green;}
input{margin:10px;}
input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;}
</style>
</head>
<body>
<div class="box">
<span>点击按钮后，删除被选项目之后的所有选项。</span><br>
<div class="content">
<input type="checkbox" name="item"><span>萝卜</span>
<input type="checkbox" name="item"><span>青菜</span>
<input type="checkbox" name="item"><span>小葱</span><br>
<input type="checkbox" name="item"><span>豆腐</span>
<input type="checkbox" name="item"><span>土豆</span>
<input type="checkbox" name="item"><span>茄子</span><br>
</div>
<input type="button" value="删除">
</div>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)