タグ別アーカイブ: empty

jQueryで要素を削除する|remove(), empty(), unwrap(), detach()

remove() は要素を丸ごと削除する

$(“#parent”).remove();

empty() は要素の中を空にする

$(“#parent”).empty();

unwrap() は親要素を削除する

$(“#child”).unwrap();

detach() は 削除した要素を再利用する

//【1】#targetをクリックすると背景を赤に変更
$(‘#target’).on(“click”, function(){
$(this).css(‘background’ , ‘red’);
});

//【2】detachボタンをクリックするとdetach
$(‘#detach’).on(“click”, function() {
div = $(‘#target’).detach();
});

//【3】removeボタンをクリックするとremove
$(‘#remove’).on(“click”, function() {
div = $(‘#target’).remove();
});

//【4】再表示ボタンをクリックすると再表示
$(‘#append’).on(“click”, function() {
$(‘#detach’).before(div);
});