(Добавление и) Удаление элементов списка с помощью JavaScript / jQuery - PullRequest
Новая
       18

(Добавление и) Удаление элементов списка с помощью JavaScript / jQuery

3 голосов
/ 22 мая 2011

Я почти новичок в JavaScript и jQuery (поэтому я прошу прощения, если я не узнал подходящий ответ на мой вопрос, в похожих постах).

Вот эта вещь. У меня есть список с большим количеством вещей в каждом элементе списка: 

<ul id="fruit_list">
    <li>
         <h4> Fruit 1: <a href="#" class="remove">remove</a> </h4>
         <p> blablabla </p>
    </li>

    <li>
         <h4> Fruit 2: <a href="#" class="remove">remove</a> </h4>
         <p> blablabla </p>
    </li>
</ul>

<a href="#" class="add">add</a>

Что я хочу сделать, так это когда я нажимаю на якорь «удалить», чтобы удалить элемент списка, содержащий его.

(При желании я хотел бы манипулировать инкрементным числом в Fruit 1, Fruit 2 и т. Д. Таким образом, чтобы при удалении элемента # 2 следующим стал номер 2 и т. Д. Но в любом случае.)

Итак, вот что я написал: 

$(function(){
    var i = $('#fruit_list li').size() + 1;

    $('a.add').click(function() {
        $('<li><h4>Fruit '+i+':<a href="#" class="remove">
             remove</a></h4><p>Blabla</p></li>')
        .appendTo('#fruit_list');
        i++;
    });

    $('a.remove').click(function(){

        $(this).parentNode.parentNode.remove();
        /* The above obviously does not work.. */
        i--;
    });
});

Якорь «add» работает как положено. «Удалить» пьет лимонад ..

Итак, есть идеи? Спасибо

РЕДАКТИРОВАТЬ: Спасибо за ваши ответы всем! Я учел многие из ваших мнений (поэтому я не буду комментировать каждый ответ отдельно) и, в конце концов, все получилось так: 

$('a.remove').live('click', function(){
    $(this).closest('li').remove();
    i--;
});

Спасибо за вашу скорую помощь!

Ответы [ 3 ]

1 голос
/ 22 мая 2011

Привязка события a.remove должна быть привязкой live http://api.jquery.com/live/. Узлы добавляются в DOM после вызова doc ready.

Кроме того, я думаю, что вы хотите использовать parent() вместо parentNode. Если я не отстаю в своем jQuery, parentNode - это просто манипулирование DOM, и нет никакого стандартного remove(), это removeChild(). Здесь вам нужна коллекция jQuery, возвращенная из parent().

0 голосов
/ 22 мая 2011

Причина в том, что $('a.remove') выполняется только один раз, и поэтому обнаруживается только в тот момент, когда у вас еще нет ссылок на удаление.Чтобы решить эту проблему, переписайте свою функцию ADD следующим образом: 

$('a.add').click(function() {
    var $li = $('<li><h4>Fruit '+i+':<a href="#" class="remove">
         remove</a></h4><p>Blabla</p></li>');
    $li.appendTo('#fruit_list');
    $li.find('a.remove').click(function() {
        $li.remove();
        i--;
    });
    i++;
});

И просто удалите старую функцию удаления.

РЕДАКТИРОВАТЬ: О, это будет работать только для добавляемых вами элементов, если вы уже загрузилинекоторые элементы списка в html перед выполнением любого Javascript, добавьте эту функцию в $('a.add').click: 

$('a.remove').click(function(){
    $(this).parent().parent().remove();
    i--;
});
0 голосов
/ 22 мая 2011

Попробуйте $(this).parents("LI").remove();

...