jQueryでDOM要素を削除

jQueryでDOM要素を削除する方法です。

display:none;などで要素を非表示にすることで、消したように見せることはできますが、
jsでdisplay:block;や他のcssが利いてしまっていて、要素を非表示にできない場合などに、
使用してみるといいかもしれません、

jQueryの要素の削除には、
・remove()
・empty()
・unwrap()

などがあります。

<div id="box">
  <p class="text">子要素</p>
</div>

</div>

■.remove()
remove()は、指定した要素ごと削除します。
#boxごと子要素も含め削除されます

<script>
$(function(){
$("#box").remove();
});
</script>

$(function(){

$("#box").remove();

});

</script>

■.empty()
empty()は、指定した要素の子要素を削除します。
id=”box”は残ります。

<script>
$(function(){
$("#box").empty();
});
</script>

$(function(){

$("#box").empty();

});

</script>

■.unwrap()

.unwrap()は親要素のみを削除します。
id=”text”を囲っていた#boxが削除されます。

<script>
$(function(){
$("#text").unwrap();
});
</script>

$(function(){

$("#text").unwrap();

});

</script>

jQueryでの要素に連番を付加する

jQueryで特定の要素を包容する