1

Реализовано динамическое добавление элементов списка <li> с вложенными элементами <a><i></i></a>. Задача удалить родительский элемент <li> по клику на вложенный элемент <i>, который в свою очередь вложен в <a>.

Разметка:

<div id="tabsSlide" class="tabs-slider">
    <ul class="tabs-slider-wrapper nav nav-tabs js_order_service_tabs">
        <li class="js_order_request_service_tab">
            <a href="#order_service" data-toggle="tab">
               <i class="icon icon-remove js_remove_service_tab"></i>Tab
            </a>
        </li>
    </ul>            
</div>

Код удаления элемента:

$('#removeTab').click(function(){
 $(this).parent().remove();
});

Полный код

Сейчас при нажатии на иконку удаления в теге <i> удаляются все динамически созданные элементы <li>. А необходимо удалить только родительский элемент <li> со всем содержимым.

0

2 ответа 2

4

Попробуйте так:

$('body').on('click', '.js_remove_service_tab', function(e) {
    $(this).closest('.js_order_request_service_tab').remove();
});

Клик навешивается через body, поскольку элементы добавляются динамически.

2
  • 1
    closest лучше чем parents, поскольку остановится, как только найдёт нужный элемент.
    – Qwertiy
    12 мая 2016 в 12:32
  • @Qwertiy, Спасибо. Подправил ответ. 12 мая 2016 в 12:36
2

у Вас removeTab это Id, он должен быть уникален на странице

v.1

по идеи должно быть так, но событие надо вешать на каждый добавленный узел:

$('#tabsSlide i.icon-remove').unbind().click(function(){
  $(this).parents('li').remove();
});

v.2

но лучше немного поправить верстку удаляемого элемента:

$('#TabAdded').click(function () {
 $('#TabAdded').before('<li class="js_order_request_service_tab"><a href=""><i id="removeTab" class="icon icon-remove js_remove_service_tab" onclick="del(this)"></i>Tab</a></li>');
});

...

function del(t) {
  $(t).closest('.js_order_request_service_tab').remove();
}

в этом варианте ссылка на удаляемый элемент относительная

9
  • это что за .unbind() такой) Для чего он тут 12 мая 2016 в 12:37
  • ну наверное потому, что click добавляется не на один (новый) элемент, а на все найденные
    – ravend
    12 мая 2016 в 12:56
  • это не ответ на вопрос, зачем тут нужен unbind :) 12 мая 2016 в 13:00
  • unbind для удаления предыдущих event'ов, иначе в списке из 100 позиций на первом узле будет висеть на 100 событий, на втором 99 и т.д. Хотя лучше переделать верстку, чтоб ссылка была относительной: <i id="removeTab" class="icon icon-remove js_remove_service_tab" onclick="del(this)"></i> function del(t){$(t).closest('.js_order_request_service_tab').remove();}
    – ravend
    12 мая 2016 в 13:09
  • добавь в свой ответ твое предложение, подскажи задающему как сделать правильней. 12 мая 2016 в 13:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.