Removing specific element from a list with JQuery

Question

i have a dynamic list, which looks like this:

<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>

The list can have more items than these three.

When someone clicks on a specific button, i want that e.g. the "tl_2" will be removed from the list. I tried it whith these JQuery commands, but non of them were working:

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

or

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

How can i solve this?

Answer 1

You probably have more than one element with the same ID.

You don't have to use ID at all in case you want to remove them by index you can use the .eq() method:

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

This will remove the second list item each click.

Live test case.