jQuery remove() 方法

remove() 方法从 jQuery 中的 DOM 中删除元素。类似地,empty() 方法仅删除 DOM 中选定元素的子元素。

本教程演示了如何在 jQuery 中使用 removeempty 方法。

jQuery remove() 方法

remove() 方法可以从 DOM 中删除选定的元素。该方法将删除选定的元素和元素内的所有内容。

此方法的语法如下。

$(selector).remove(selector)

其中 selector 是一个可选参数,指定是否删除一个或多个元素,如果要删除的元素不止一个,我们可以用逗号分隔它们。让我们尝试一个 remove() 方法的示例。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#RemoveDiv").remove();
            });
        });
    </script>
</head>
<body>
    <div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
        <h1> This Div Will be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>
    </div>
    <br>
    <div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
        <h1> This Div Will not be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>
    </div>
    <button>Remove Div</button>
</body>
</html>

上面的代码将删除选定的 div 及其子元素。见输出:

jQuery remove() 方法

正如我们所见,remove() 方法删除了选定元素内的所有元素。另一种方法 empty() 仅删除子元素。

jQuery empty() 方法

empty() 方法可以从选定元素中删除所有子元素。它还会删除子元素内的内容。

empty() 方法的语法如下。

$("selector").empty();

selector 可以是 id、类或元素名称,让我们尝试 empty 方法的示例。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#RemoveDiv").empty();
            });
        });
    </script>
</head>
<body>
    <div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
        Hello this is the div content
        <h1> This Div Content Will be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>
    </div>
    <br>
    <div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
        <h1> This Div Content Will not be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>
    </div>
    <button>Remove Div</button>
</body>
</html>

上面的代码将只删除 div 的子内容,而不是 div 本身。见输出:

jQuery remove() 方法

jQuery indexof() 方法

在本文中,我们将处理 jQuery indexOf 功能,它返回指定元素或字符在指定元素或字符串中的位置。

在 jQuery 中使用 indexOf 方法

jQuery 数组函数 indexOf() 用于返回给定元素第一次出现的索引或给定数组中的搜索值。jQuery 数组函数 indexOf() 是一个内置的 jQuery 函数。

jQuery 数组 indexOf() 函数在指定数组中查找指定的搜索值/元素。如果找到值/元素,则将元素的第一次出现作为从左侧开始的整数值返回,如果在数组中未找到元素,则返回 -1

也可以从指定的索引或位置开始搜索元素。如果未指定起始索引,则搜索从头开始,默认索引为 0

要在末尾开始搜索,我们可以使用 jQuery 的 lastIndexOf() 函数。

语法:

array.indexOf(searchValue, initPosition);
  1. searchValue 是一个强制参数。它表示 searchValue,即在数组中搜索。
  2. initPosition 是一个可选参数。它指示开始搜索元素的索引值。

指定元素的索引值将作为此函数的输出返回。让我们通过一个简单的例子来理解它。

代码 – HTML:

<select id="index">
  <option>Japanese</option>
  <option>English</option>
  <option>Hindi</option>
  <option>French</option>
  <option>Telugu</option>
</select>

代码 – JavaScript + jQuery:

const languages = [ "English", "Hindi", "Japanese", "Marathi", "French" ];
$('#index').on('change', () => {
    console.log(languages.indexOf($('#index').val(), 0))
});

我们已经在上面的例子中以随机顺序定义了 languages,一旦用户选择了其中一种语言,它就会尝试在现有数组中查找该语言的索引。当此数据动态进入时,这是最有用的。

尝试在任何支持 jQuery 的浏览器中运行代码片段。分别选择印地语或法语时,它将显示以下结果。

输出:

1
4

运行演示代码