Как мне удалить следующих двух братьев и сестер и ТОЛЬКО следующих двух братьев и сестер в этом всплывающем окне с помощью jQuery?

Итак, у меня есть всплывающее окно. Вы нажимаете ссылку "+ Добавить текст", и она добавляет текстовое поле на страницу вместе с другой "+ Добавить текстовую ссылку" и "x" в промежутке в правом углу каждого текстового поля. Когда я нажимаю "х" в этом всплывающем окне, я хочу, чтобы он удалил двух братьев и сестер, которые следуют за ним. HTML-код, сгенерированный на странице, выглядит примерно так...

 <div class="popup">
   <div class="delete-text-box-x">X</div>  
   <textarea class="textbox"></textarea>
   <span class="add-textbox">+Add text</span>
   <div class="delete-text-box-x">X</div>
   <textarea class="textbox"></textarea>
   <span class="add-textbox">+Add text</span>
   <div class="delete-text-box-x">X</div>
   <textarea class="textbox"></textarea>
   <span class="add-textbox">+Add text</span>
</div>

Когда я щелкаю по элементу div с классом "delete-text-box-x">, я бы хотел удалить следующие два элемента. То есть следующие соответствующие текстовые области и "+ Добавить текст" охватывают.

У меня почти есть это. Вот мой jQuery

$('.delete-text-box-x').click(_.bind(function(e){
  $('.delete-text-box-x').nextUntil('.add-textbox').remove();
}, this)); 
}

Понятно, почему это не работает. Метод nextUntil действительно выделяет и удаляет текстовые поля после разделителей "X". Но селектор выбирает КАЖДЫЙ "Х" на странице и, следовательно, удаляет КАЖДОЕ текстовое поле на странице. Он также не удаляет области "+ Добавить текстовое поле"...

Итак, как мне получить более конкретный, чем текущий селектор, который я использую? Таким образом, он выбирает ТОЛЬКО конкретный "X", который я нажимаю, а не каждый "X" на странице.

Источник

2 ответа

Решение

Во-первых, вам нужно основать селектор на элементе, который вызвал событие, используя this ключевое слово. Оттуда вы можете использовать nextUntil(), но вы должны использовать селектор следующего X так что все необходимые элементы найдены. Наконец, вам нужно использовать add() включить кликнул X сам. Попробуй это:

$('.delete-text-box-x').click(function (e) {
    $(this).nextUntil('.delete-text-box-x').add(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
    <div class="delete-text-box-x">X</div>
    <textarea class="textbox"></textarea> 
    <span class="add-textbox">+Add text</span>

    <div class="delete-text-box-x">X</div>
    <textarea class="textbox"></textarea> 
    <span class="add-textbox">+Add text</span>

    <div class="delete-text-box-x">X</div>
    <textarea class="textbox"></textarea> 
    <span class="add-textbox">+Add text</span>
</div>

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

Источник

Это пока работает, чтобы найти другой элемент в братьях и сестрах, поэтому в приведенном выше коде вы выбираете следующее текстовое поле добавления, а не следующий значок X.

$('.delete-text-box-x').click(function() {

        $(this).nextUntil('.delete-text-box-x')add(this).remove();
});
Источник
Другие вопросы по тегам