※ ChatGPTを利用し、要約された質問です（原文：親要素の除去(Jqueryのunwrapメソッド)）
親要素の除去(Jqueryのunwrapメソッド)
このQ&Aのポイント
jqueryのunwrapメソッドを使用してdiv要素の除去を行うコードを作成しました。
ボタンを押下すると特定のdiv要素が除去され、テーブルが1つだけ残るようになります。
しかし、ボタンを押下後、IEの開発者ツールで確認するとテーブルが残り1つのテーブルに対してunwrapがうまく行われていないようです。
親要素の除去(Jqueryのunwrapメソッド)
jquery のunwrapメソッドを使用して下記コードを作成しました。
「div#wrap1」の配下に
「div#wrap2」、「div#wrap3」「div#wrap4」3つのdiv要素がありその3つの要素
それぞれの配下にはテーブル(3つとも同じ名前のテーブル)が存在しています。
ボタンを押下すると「div#wrap1」、「div#wrap2」、「div#wrap3」「div#wrap4」
を全て除去し、テーブルも1つだけ残すコードを書きました。
しかし、ボタン押下後、IEの開発者ツールでHTMLを確認するとテーブルは１つだけ
残っているのですが「div#wrap1」配下に存在しています。
コード中ではテーブルが残り1つになったテーブルに対して$(this).unwrap()とやって
いるのですがこれがうまくいっていないようです。
原因がわかられる方はいらっしゃいますでしょうか。
<html>
<head>
<meta charset="UTF-8" />
<script src="jquery-1.9.1.js"></script>
<script>
$(function () {
$( "#add" ).click(function () {
if($("table[name='tblList']").length > 1)
{
// tableの親要素「div#wrap2」、「div#wrap3」「div#wrap4」を除去
$("table[name='tblList']").unwrap();
$("table[name='tblList']").each(function(){
// 「name='tblList'」のテーブルを削除
$(this).remove();
//「name='tblList'」のテーブルが残り1つの場合
if($("table[name='tblList']").length == 1)
{
// tableの親要素「div#wrap1」を除去
$(this).unwrap();
return false;
}
});
}
});
});
</script>
</head>
<body>
<input type="button" id="add" value="行追加">
<div id="wrap1">
<div id="wrap2">
<table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList">
<thead>
<tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr>
</thead>
<tbody>
<tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr>
<tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr>
<tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr>
</tbody>
</table>
</div>
<div id="wrap3">
<table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList">
<thead>
<tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr>
</thead>
<tbody>
<tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr>
<tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr>
<tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr>
</tbody>
</table>
</div>
<div id="wrap4">
<table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList">
<thead>
<tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr>
</thead>
<tbody>
<tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr>
<tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr>
<tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
お礼
ご回答ありがとうございます。 >>return false と書くとその要素処理自体しないと思います。 そのような仕様だったのですね。 $(this).unwrap();の後にreturn false;していたのでunwrap()自体は実行されている と思っていました。 ご指摘のように修正したところうまくいきました。ありがとうございました。