博客

jQuery remove()

  • Post category:jquery

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元素的删除操作。

Tags: