jQuery的remove()函数可以删除选择器匹配的所有元素,包括它们的所有后代元素。具体来说,它可以从DOM文档中删除与给定选择器匹配的一个或多个元素。下面是该函数的完整攻略:
语法
$(selector).remove();
参数
无参数。可以在选择器中使用任何 jQuery 选择器。
返回值
返回删除的元素。
示例1
<div>
<p>Hello, World!</p>
<ul>
<li>Apples</li>
<li class="selected">Oranges</li>
<li>Bananas</li>
</ul>
</div>
<button id="remove-button">Remove Oranges</button>
$('#remove-button').on('click', function() {
$('.selected').remove();
});
如果我们点击”Remove Oranges”按钮,它会删除带有”selected”类的橙子列表项。这段代码使用选择器”.selected”从DOM中选择这个元素,然后调用remove()方法,从DOM中删除它。
示例2
<div>
<p>Hello, World!</p>
<div>
<h2>Using Remove()</h2>
<p>Here's how to use jQuery's Remove() function:</p>
<ul>
<li>First, select the element(s) you want to remove.</li>
<li>Next, call the .remove() method on the selected element(s).</li>
<li>Finally, the selected element(s) will be removed from the DOM.</li>
</ul>
</div>
</div>
<button id="clear-button">Clear Instructions</button>
$('#clear-button').on('click', function() {
$('div > div').remove();
});
如果我们点击”Clear Instructions”按钮,它会删除包含说明的内部div(但不删除第一个div或其中的段落)。此示例使用选择器”div > div”选择内部div,并调用remove()方法将其从DOM中删除。
这样,我们可以通过remove()函数简洁明了地处理DOM元素的删除操作。