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

#javascript #jquery #list #html-lists

#javascript #jquery #Список #html-списки

Вопрос:

Я почти новичок в 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--;
    });
});

Привязка «добавить» работает так, как ожидалось. «Удаляемый» пьет лимонад..

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

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

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

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

Ответ №1:

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

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

1. Мое личное мнение таково, что вы никогда не должны использовать live без крайней необходимости, поскольку это сильно влияет на производительность.

2. По моему опыту, для большинства страниц это не имеет большого значения. Однако это может иметь значение, если у вас много данных на странице или многое происходит в DOM.

Ответ №2:

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

Ответ №3:

Причина в том, что $('a.remove') выполняется только один раз, и поэтому обнаруживается только в тот момент, когда у вас еще нет ссылок на удаление. Чтобы решить эту проблему, перепишите свою функцию ДОБАВЛЕНИЯ следующим образом:

 $('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--;
});