親要素を取り除いたり、要素を削除する。

2015年8月3日

前回は要素を包む命令を取り上げました。
今回はその逆、親要素を取り除いたり、
要素を置き換えたりするものを紹介します。

親要素を取り除く

指定した親要素の取り除く場合は、unwrap()命令を使用します。
サンプルコードの箇所のunwrap()の箇所をみて頂ければ、
わかりますが、<strong>を囲っていた

タグが
消えているのが分かります。

要素を置き換える

指定した要素を他の要素に置き換えることができます。
要素を置き換えたときには、replaceWith()命令を使います。
replaceWith()の括弧の中は「置き換え後」のHTMLを書きます。

サンプルコードを実行すると、<b>タグで囲っていた
箇所が<h1>タグで囲まれテキストも置き換わっているのは
確認できるかと思います。

要素の削除

remove()命令を使用すると、セレクターで指定した要素を削除できます。

実行すると、<strong>タグで囲まれたものが
削除されているのが確認できます。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        font-weight:100;
        margin:0 auto;}
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">
    
<p><strong>unwrapの実験</strong></p>
<p><b>replaceWithの実験</b></p>

</div><!--contatiner-->

<script>
$(document).ready(function(){

    $("strong").unwrap();
    $("b").replaceWith("<h1>置き換え完了</h1>")
    $("strong").remove();
    
});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

font-weight:100;

margin:0 auto;}

</style>

</head>

<body>

<p><strong>unwrapの実験</strong></p>

<p><b>replaceWithの実験</b></p>

</div>

$(document).ready(function(){

$("strong").unwrap();

$("b").replaceWith("<h1>置き換え完了</h1>")

$("strong").remove();

});

</script>

</body>

</html>