タグの削除とラップの方法【jQuery】

この記事の前提条件

対象: jQuery(既存のjQuery環境での実装を想定)
難易度: ★★☆
所要時間: 約5分

WordPressの自動出力やCMSの仕様上、狙った通りにタグを付けられない場面はよくあります。「余計なタグだけ外したい」「中身はそのままで、別のタグで囲み直したい」という2つの操作を、jQueryでどう書くか整理しておきます。

目次非表示

タグだけ外す: unwrap()
別のタグで囲み直す: wrap()
まとめ

タグだけ外す: unwrap()

中身は残したまま、親タグだけを取り除きたい場合は.unwrap()を使います。

// Before: <p><img src="photo.jpg"></p>
$('.content img').unwrap();
// After:  <img src="photo.jpg">

WordPressの投稿本文にアップロードした画像は、自動的に<p>タグで囲まれて出力されます。CSSのレイアウト上、この<p>タグが邪魔になることがあり、その場合にこのunwrap()で取り除きます。

別のタグで囲み直す: wrap()

逆に、既存の要素を新しいタグで囲みたい場合は.wrap()を使います。

// Before: <img src="photo.jpg">
$('.content img').wrap('<div class="img-frame"></div>');
// After:  <div class="img-frame"><img src="photo.jpg"></div>

画像に枠線や影のデザインを付けたいけれど、CMS側の出力構造上、直接imgタグにクラスを追加できない…といった場面で重宝します。

💡 「入れ替え」はunwrap()とwrap()の組み合わせ

「<p>タグを<div>タグに置き換えたい」という「タグの種類を変える」操作は、専用のメソッドがあるわけではなく、まずunwrap()で外し、次にwrap()で新しいタグに囲み直す、という2段階の組み合わせで実現します。1つのメソッドで完結すると思い込んで探し続けると見つからないので、この考え方を覚えておくと応用が利きます。