Удаление определенного элемента из списка с помощью JQuery

У меня есть динамический список, который выглядит так:

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

Как я могу это решить?

Ответы

Ответ 1

У вас, вероятно, есть более одного элемента с одинаковым идентификатором.

Вам не нужно использовать идентификатор вообще, если вы хотите удалить их по индексу, вы можете использовать метод .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 должно использоваться только один раз в документе. Если нескольким элементам был присвоен одинаковый идентификатор, запросы, которые используют этот идентификатор, будут выбирать только первый согласованный элемент в DOM. Однако это поведение нельзя полагаться; документ с более чем одним элементом, использующим один и тот же идентификатор, недействителен.

Ответ 3

Я думаю, что вы не показываете нам какую-то часть своего кода, так как я подозреваю, что вы пытаетесь генерировать этот идентификатор динамически, то есть и устанавливаете его динамически. вы должны убедиться, что в идентификаторе нет символа "пробела", который, вероятно, испортит...

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

Работает в соответствии с документацией jquery. это сработало для меня.

Ответ 4

У вас должна быть ошибка где-то еще, потому что у вас есть просто работает.

Проверьте консоль ошибок.

Хотя ваш второй пример должен быть:

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