子要素に含まれない文字列を削除したい

Question

実現したいこと

掲題のとおりです。
jQuery（または JavaScript）でどのように書いたらよいでしょうか。

該当のソースコード

<div id="target">
  ここは削除する
  <div>ここは残す</div>
  ここは削除する
  <span>ここは残す</span>
</div>

Comments

[maisumakun]

試してみたことがあるのでしたら、それについても書いてください。

Answer 1

こちらはいかがでしょうか。

JavaScriptのコード例

中身を全部削除してから、要素のみ挿入しなおす手法

// 親要素を取得
const targetElm = document.querySelector('#target');
// 子要素（親直下のテキスト等は含まない）を全て取得
const children = targetElm.querySelectorAll('*');
// 親要素の中身を全て削除する
targetElm.innerHTML = '';
// 取得した子要素を繰り返し処理で一つずつ末尾に追加していく
children.forEach(element => targetElm.appendChild(element));

直下のテキストノードのみ削除する手法

// 親要素を取得
const targetElm = document.querySelector('#target');
// 親要素の中身を全て取得（Nodeと言います。要素だけでなく、テキストやコメントも含む）
const childNodes = targetElm.childNodes;

// 取得したNodeを一つずつ繰り返し処理
for (const node of childNodes) {
	// テキストノードかどうか判定
  const isText = node.nodeType === 3;
	// テキストノードだった場合削除  
  if (isText) node.remove();
}

jQueryのコード例

中身を全部削除してから、要素のみ挿入しなおす手法

$(function() {
  // 親要素を取得
  const $target = $('#target');
  // 子要素（親直下のテキスト等は含まない）を全て取得
  const $children = $target.children();
  
  // 親要素の中身を全て削除する
  $target.empty();
  
  // 取得した子要素を繰り返し処理で一つずつ末尾に追加していく
  $children.each(function() {
    $target.append($(this));
  });
});

Comments

[gosaro]

回答ありがとうございました。
どの方法でも期待通りの結果が得られることを確認しました。
助かりました。