jquery проверяет вхождение символа после содержимого элемента

Question

У меня есть это:

<div class="people">
 <a class="deleteUser"> x </a> <a class="userLink"> John Malkovich </a> , 
 <a class="deleteUser"> x </a> <a class="userLink"> Adrian Mutu </a>
</div>

При нажатии на ссылку "deleteUser", я хочу иметь возможность:

- скрыть ту же ссылку

- удалить относительную ссылку "userLink"

- и только если после ссылки "userLink" есть какая-либо кома (вот где мне нужна помощь!)

Как проверить с помощью jquery, есть ли кома после содержимого элемента?

спасибо

Luca

Answer 1

Попробуйте это:

$(".deleteUser").click(function() {
    var index = ($(this).index()+1)/2;
    $(".people").contents().filter(function() {
        return this.nodeType == 3 && $.trim($(this).text()) == ",";
    }).eq(index).remove();
    $(this).next(".userLink").remove().end().remove();
});

См. jsFiddle

Answer 2

Учитывая вашу оригинальную разметку, вы можете использовать .contents() и .filter(), чтобы найти последний текстовый узел, который является ,

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

$(".deleteUser").click(function() {
    var a = $(this).index()/2;
    $(this).next(".userLink").remove().end().remove();
    $(".people").contents().filter(function() {
        return this.nodeType == 3 && $.trim($(this).text()) == ",";
    }).eq(a - 1).remove();
});

Примечание: Если вы можете настроить разметку, чтобы обернуть элементы в другой элемент, это будет легче сделать.

Пример кода на jsfiddle .

Answer 3

Я бы реструктурировал ваши данные:

<div class="people">
    <div class="user"><a class="delete"> x </a> John Malkovitch,</div>
    <div class="user"><a class="delete"> x </a> Adrian Mutu</div>
</div>

Тогда вы можете просто получить некоторый код, который удаляет весь div.user:

$('div.people div.user a.delete').click(function(evt) {
    $(evt.target).closest('div.user').hide();
});

Answer 4

Я бы поместил оба тега <a> в контейнер:

<div class="people">
 <div class='person' id='person1_container'><a class="deleteUser"> x </a> <a class="userLink">John Malkovich</a>,</div>
 <div class='person' id='person1_container'><a class="deleteUser"> x </a> <a class="userLink"> Adrian Mutu </a></div>
</div>

Тогда вы можете скрыть весь контейнер:

<div class="people">
 <div class='person' id='person1_container'><a class="deleteUser" onclick="document.getElementById('person1_container').style.display = 'none';"> x </a> <a class="userLink">John Malkovich</a>,</div>
 <div class='person' id='person2_container'><a class="deleteUser" onclick="document.getElementById('person2_container').style.display = 'none';"> x </a> <a class="userLink"> Adrian Mutu </a></div>
</div>