Замена и удаление элементов

102

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Замена элементов

С помощью методов, описанных в таблице ниже, можно заменить один набор элементов другим:

Методы замены элементов
Метод Описание
replaceWith(HTML), replaceWith(jQuery), replaceWith(HTMLElement[]) Заменяет элементы, содержащиеся в объекте jQuery, указанным содержимым
replaceAll(jQuery), replaceAll(HTMLElement[]) Заменяет элементы, заданные аргументом, элементами, содержащимися в объекте jQuery
replaceWith(функция) Выполняет динамическую замену элементов, содержащихся в объекте jQuery, с использованием функции

Методы replaceWith() и replaceAll() работают одинаковым образом, за исключением того, что объект jQuery и аргумент играют в них противоположные роли. Пример использования обоих методов приведен ниже:

$(function() {
	
    var newElems= $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/orchid.png'/>")
        .append("<label for='orchid'>Орхидея:</label>")
        .append("<input name='orchid' value='0' required />")
		.css("border", "thick solid red");
        
    $('#row1').children().first().replaceWith(newElems);
            
    $("<img src='http://professorweb.ru/downloads/jquery/carnation.png'/>").replaceAll('#row2 img')
                
	
});

В этом сценарии сначала создается набор элементов, а затем в документе выполняется поиск элемента div, атрибут id которого равен row1, и его первый дочерний элемент заменяется новым содержимым с помощью метода replaceWith() (что в конечном счете приводит к замене элементов, соответствующих астрам, элементами, соответствующими орхидеям). Наконец, с помощью метода replaceAll() все элементы img, являющиеся потомками элемента, атрибут id которого равен row2, заменяются изображениями гвоздики.

Вид страницы в окне браузера представлен на рисунке:

Замена содержимого с помощью методов replaceWith() и replaceAll()

Передавая функцию методу replaceWith(), можно выполнять динамическую замену элементов. Аргументы этой функции не передаются, однако переменная this внутри нее ссылается на обрабатываемый элемент. Соответствующий пример приведен ниже:

$(function() {
                
    $('div.drow img').replaceWith(function() {
        if (this.src.indexOf("rose") > -1) {
            return $("<img src='http://professorweb.ru/downloads/jquery/carnation.png'/>").css("border", "thick solid red");    
        } else if (this.src.indexOf("peony") > -1) {
            return $("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>").css("border", "thick solid red");    
        } else {
            return $(this).clone();
        }
    });
	
});

В этом сценарии мы выполняем замену элементов img на основании значений их атрибутов src. Если этот атрибут элемента img содержит rose, то данный элемент заменяется другим, которому соответствует изображение carnation.png. Если же атрибут src элемента содержит peony, то данный элемент заменяется другим, которому соответствует изображение lily.png. Оба замененных элемента выделяются рамкой красного цвета, чтобы сделать эффект более заметным. Страница в окне браузера показана на рисунке:

Замена элементов с использованием функции

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

Удаление элементов

В дополнение к возможности вставки и замены элементов библиотека jQuery предлагает ряд методов для удаления элементов из DOM. Краткое описание этой группы методов приведено в таблице ниже:

Методы для удаления элементов
Метод Описание
detach(), detach(селектор) Удаляет элементы из DOM. Данные, связанные с элементами, сохраняются
empty() Удаляет все дочерние узлы каждого из элементов, содержащихся в объекте jQuery
remove(), remove(селектор) Удаляет элементы из DOM. По мере удаления элементов связанные с ними данные уничтожаются
unwrap() Удаляет родительские элементы каждого из элементов, содержащихся в объекте jQuery

Пример использования метода remove() для удаления элементов приведен ниже:

$(function() {
                
    $('img[src*=daffodil], img[src*=snow]').parent().remove();    
	
});

В этом сценарии мы выбираем элементы img, атрибуты src которых содержат daffodil и snow, получаем их родительские элементы, а затем удаляем их. Можно также отфильтровать удаляемые элементы, передав селектор методу remove():

$(function() {
                
    $('div.dcell').remove(':has(img[src*=snow], img[src*=daffodil])');  
	
});

Оба сценария приводят к одному и тому же результату:

Удаление элементов из DOM

Как показывает мой опыт работы с методом remove(), не все селекторы способны выполнять функцию фильтра. Я рекомендую тщательно тестировать каждый шаг и отдавать предпочтение исходному набору выбранных элементов, если только это возможно.

Удаление элементов с сохранением данных

Метод detach() работает аналогично методу remove() с тем лишь отличием, что связанные с удаляемыми элементами данные сохраняются. О связывании данных с элементами подробно говорится в одной из следующих статей, а на данном этапе вам достаточно знать лишь то, что если планируется последующая вставка удаленных элементов в другое место документа, то обычно предпочтение следует отдавать методу detach().

Пример использования метода detach() приведен ниже:

$(function() {
                
    $('#row2').append($('img[src*=astor]').parent().detach());
	
});

В этом сценарии удаляется родительский элемент элемента img, атрибут src которого содержит astor. Затем элементы вновь вставляются в документ с помощью рассмотренного нами ранее метода append(). Я стараюсь избегать такого подхода, поскольку использование метода append() без вызова метода detach() дает тот же эффект.

Очистка элементов

Метод empty() удаляет все элементы-потомки и текст из элементов, содержащихся в объекте jQuery. Сами элементы остаются в документе. Соответствующий пример приведен ниже:

$(function() {
                
    $('#row1').children().eq(1).empty().css("border", "thick solid red");
	
});

В этом сценарии из дочерних элементов элемента с атрибутом id, равным row1, выбирается элемент с индексом, равным 1, и вызывается метод empty(). Чтобы сделать изменение более заметным, соответствующая позиция в документе заключена в красную рамку. Страница в окне браузера показана на рисунке:

Использование метода empty()

Метод unwrap()

Метод unwrap() удаляет родительские элементы для элементов, содержащихся в объекте jQuery. Выбранные элементы становятся дочерними элементами родителей своих бывших родительских элементов. Пример использования метода unwrap() приведен ниже:

$(function() {
                
    $('#row1 div').unwrap().css('display','block');
	
});

В этом сценарии выбираются элементы div, являющиеся потомками элемента с атрибутом id, равным row1, и вызывается метод unwrap(), что приводит к удалению элемента row1, как показано на рисунке:

Изменение расположения на странице элементов, лишенных своих прежних родительских элементов, обусловлено тем, что в определение используемых стилей CSS, обеспечивающих расположение элементов в виде таблицы, входит идентификатор row1.

Пройди тесты
Лучший чат для C# программистов