使用 JQuery 从列表中删除特定元素答案

【问题标题】：Removing specific element from a list with JQuery使用 JQuery 从列表中删除特定元素
【发布时间】：2012-02-12 13:58:46
【问题描述】：

我有一个动态列表，如下所示：

<ul>
<li class="border" id="tl_1">Text1</li>
<li class="border" id="tl_2">Text2</li>
<li class="border" id="tl_3">Text3</li>
</ul>

列表可以包含比这三个更多的项目。

当有人点击特定按钮时，我想要那个，例如“tl_2”将从列表中删除。我用这些 JQuery 命令试过了，但没有一个能工作：

$('#tl_2').remove();

或

$('li').find('tl_1').remove();

我该如何解决这个问题？

【问题讨论】：

显示你的尝试，它应该有效...
请注意，无需通过id“查找”元素。 id 是独一无二的
@Torben，当您说dynamic 时，您的意思是通过某种请求动态填充列表项，可能在您问题中的代码运行之后?
$('#tl_2').remove();应该可以工作（见api.jquery.com/remove）。如果您将 li 替换为 ul，您的第二行将起作用： $('ul').find('tl_1').remove();
它有效 :( 我使用了错误的选择器来确定 tl_ 后面的数字...不过有一个函数可以从根本上真正删除该项目，而不仅仅是将其设置为“display:none;” ?

标签： jquery list

【解决方案1】：

您可能有多个具有相同 ID 的元素。

如果您想按索引删除它们，则根本不必使用 ID，您可以使用 .eq() 方法：

$("#btnRemove").click(function() {
    $("#myList li").eq(1).remove();
});

这将在每次点击时删除第二个列表项。

【讨论】：

【解决方案2】：

你可能犯了一些愚蠢的错误，它应该可以工作：

$('#buttonId').click(function(){
        $('#tl_2').remove();
    });

请注意，无需通过 id “查找”元素。 id 是唯一的。

$('li').find('tl_1').remove();  // And you were missing the # anyway...

确保每个id 都只有一个元素。 id 就像 id... 你只能有一个具有相同值的。

每个 id 值在文档中只能使用一次。如果为多个元素分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。但是，不应依赖此行为；具有多个使用相同 ID 的元素的文档无效。

【讨论】：

【解决方案3】：

我认为您没有向我们展示您的代码的某些部分，因为我怀疑您正在尝试动态生成该 id，这意味着您也可以动态设置它。您必须确保 id 中没有“空格”字符，这可能会搞砸......

$('#tl_2').remove();

根据 jquery 文档工作。它对我有用。

【讨论】：

【解决方案4】：

你肯定在其他地方有错误，因为你有just works。

请检查您的错误控制台。

虽然你的第二个例子应该是：

$('ul').find('#tl_2').remove(); // but this isn't really needed since we are selecting by id. So just go for the first example which is faster.

【讨论】：