17. Заміна, видалення, клонування

Заміна блоків контентом, очищення елементів, видалення, клонування елементів

.replaceAll('селектор') - вставить попередньо вказаний код замість вказаних елементів
.replaceWith('content') - міняє вибрані елементи на вказаний контент
.empty() - видаляє весь вміст вибраного елементу і робить його пустим
.remove() - видаляє вибрані елементи
.clone() - клонує (робить копії) вибраних раніше елементів
.clone(умова) - умова: true або false робить клони активними (true) для подій, які вже прописані для оригіналів або пасивними (false) для цих подій

Приклади

.replaceAll('селектор')

Вставить попередньо вказаний код замість вказаних елементів

Це aбзац №1 в блоці з id="ra"

Це aбзац №2 в блоці з id="ra"

$('#btn1').click (function(){
	   $('<h4>Заміна абзаців</h4>').replaceAll('#ra p'); 
});

.replaceWith('content')

Замінить вибрані елементи на вказаний контент

Це aбзац №1 в блоці з id="ra"

Це aбзац №2 в блоці з id="ra"

$('#btn2').click (function(){
	  $('#ra p').replaceWith('<h4>Заміна абзаців</h4>');
});

.empty()

Видаляє весь вміст вибраного елементу і робить його пустим

Це aбзац №1 в блоці з id="re"

Це aбзац №2 в блоці з id="re"

$('#btn3').click (function(){
	           $('#re').empty();
});

.remove()

Видаляє вибрані елементи

Це aбзац №1 в блоці з id="rr"

Це aбзац №2 в блоці з id="rr"

$('#btn4').click (function(){
	           $('#rr p').eq(0).remove();
});

.clone()

Клонує (робить копії) вибраних раніше елементів

Клікайте по span
Це span в блоці з id="rс"

Умова: true або false робить клони активними (true) для подій, які вже прописані для оригіналів або пасивними (false) для цих подій.
Пусті дужки - також означає false. В прикладі стоїть true, отже клік зберігся і для клонів.

$('#rc span').click (function(){
	    /* клонуємо span і вставляємо його в блок*/
	    $(this).clone(true).appendTo('#rc');
});   

далі ✏
Ігор Ка