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

Question

我有一个动态列表,看起来像这样:

<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();

我怎么解决这个问题？

Answer 1

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

您不必使用ID,以防您想通过索引删除它们,您可以使用以下.eq()方法:

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

这将删除每次单击的第二个列表项.

现场测试案例.

Answer 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,则使用该ID的查询将仅选择DOM中的第一个匹配元素.但是,不应依赖此行为; 具有多个使用相同ID的元素的文档无效.

Answer 3

你一定在其他地方有错误，因为你所拥有的只是有效的。

请检查您的错误控制台。

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

$('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.