Помощь с JQuery Traversal

Question

Я немного борюсь с обходом в jQuery.Вот соответствующая разметка:

<ul id="sortable" class="ui-sortable">
    <li>
        <img src="http://ecx.images-amazon.com/images/I/51Vza76tCxL._SL160_.jpg">
        <div class="controls">
            <span class="move">✜</span>
            <span class="delete">✘</span>
        </div>
        <div class="data">
            <h1>War and Peace (Oxford World's Classics)</h1>
            <textarea>Published to coincide with the centenary of Tolstoy's death, here is an exciting new edition of one of the great literary works of world literature.</textarea>
        </div>
    </li>

    <li>
        <img src="http://ecx.images-amazon.com/images/I/51boZxm2seL._SL160_.jpg">
        <div class="controls">
            <span class="move">✜</span>
            <span class="delete">✘</span>
        </div>
        <div class="data">
            <h1>A Christmas Carol and Other Christmas Writings (Penguin Classics)</h1>
            <span>Optionally, write your own description in the box below.</span>
            <textarea>Dicken's Christmas writings-in a new, sumptuous, and delightful clothbound edition.</textarea>
        </div>
    </li>
</ul>

Это код для элемента «Сортируемый» пользовательского интерфейса jQuery.Вот что я хочу, чтобы это произошло.

Когда нажата кнопка «Удалить» ($('.delete')), я хочу, чтобы элемент <li>, в котором она содержится, был удален.$('.delete').parent().parent().remove(); но в случае наличия двух элементов, кажется, удаляются оба из них.Я немного смущен этим.Я также пытался использовать closest(), чтобы найти ближайший li, но это тоже не сработало.

Как мне лучше всего пройти DOM в этом случае?

Спасибо!

Джек

Answer 1

Попробуйте:

$('.delete').click(function(){
   $(this).parentsUntil('li').parent().remove();
});

http://api.jquery.com/parentsUntil/

Примечание: доступно в jQuery 1.4 +

Answer 2

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

Попробуйте вместо этого:

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

Объект $(this) - это элемент, на который фактически был нажат, поэтому, хотя функция щелчка применяется ко ВСЕМ элементам .delete, строка внутри относится только к текущему.

Надеюсь, это поможет:)

Answer 3

.closest('li') должно работать, чтобы получить <li>.

$('.delete').click(function() {
    $(this).closest('li').remove();
});

Он вернет первый <li> элемент, который является предком вашей ссылки.

Альтернатива: .parents('li:first').

$('.delete').click(function() {
    $(this).parents('li:first').remove();
});

Вы можете опустить селектор :first , если у вас нет вложенных списков.

Answer 4

Я бы добавил класс к элементам li и использовал бы closest (), так что это было бы что-то вроде $ ('. Delete'). Closest ('. Lirow'). Remove (), где элементы li имели класс ливро.

Answer 5

Было бы лучше дать идентификатор <li> s, чтобы вы могли сделать что-то вроде $('#myLI').remove();

Answer 6

Вы должны попытаться уменьшить ваш селектор:

$('li').has(this)