勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryにて指定した要素の親要素を削除する方法

  jQuery JavaScript

jQueryにて指定した要素の親要素を削除したいケースがあった。通常の場合だと親要素のHTML部分を削除すれば良いがASPで出力されている部分だったためそのような方法が取られなかった。調べたところunwrap()を用いることで解決した。以下に利用方法等をメモ。

 

利用方法

ソースコード

<div id="parent_1">
    <div id="parent_2">
        <div id="child"></div>
    </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $(`#child`).unwrap();
});
</script>

結果

上記ソースコードの実行結果は以下の通り。

<div id="parent_1">
    <div id="child"></div>
</div>

注意点等

直近の親要素を削除するため#parent_2が削除され、#parent_1及び#childは残る。#parent_1も削除したい場合は「$(`#child`).unwrap().unwrap();」と2回指定する必要あり。

 

リファレンス

.unwrap()

https://api.jquery.com/unwrap/

 - jQuery JavaScript

  関連記事

jQueryのfind実行時に複数のセレクタを指定する方法

jQueryのfind()実行時に複数のセレクタを指定したい。 <div ...

ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...

jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...