お世話になります。
jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?
例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------
jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
------------------------------------------
このように無駄なspanタグを削除したいのですが、可能でしょうか?
ご存知の方、ご回答いただければ幸いです。
よろしくお願い致します。
No.4ベストアンサー
- 回答日時:
質問文を素直に実行するのなら。
$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});
検証データ
動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>
動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
</p>
</div>
改行コードは半角スペースとして表示されます。(HTMLの文法に準拠。)
.children()にtextNodeが入っておらず、意外と苦労しました。
ご回答いただきありがとうございます。
素晴らしいです!
当方の求めていた回答ズバリでした。
この度はご回答いただき本当にありがとうございました。
No.3
- 回答日時:
検証環境がないのでちょっと適当になってしまいますが……。
// 対象の指定
var d_span_target = $('span.a') ;
//削除前テキストの取得
var d_span_txt = d_span_target.next().text();
//書き換え
d_span_target.next().html(d_span_txt);
とかでどうでしょう?
ご回答ありがとうございます。
実際のソースは削除前テキストが対象の次にあるとは限らないため、
当方の想定しているものとは少し異なっていました。
ただ、jqueryでの解決策を教えていただき、感謝しております。
ありがとうございます。
No.2
- 回答日時:
なぜjqueryなのでしょう。
単純にスタイルシートで
span[class]{display:inline;}
span{display:none;}
と属性セレクタで上書きすればよいだけかと・・・
詳細度が11と1だと11のほうが大きいので・・
HTML/CSSをきちんと身につけましょう。
ご回答ありがとうございます。
質問にもお書きしましたが、jqueryを使っての解決策を求めています。
さらに、残念ながらその方法では、
かきくけこ
たちつてと
の文字まで消えてしまいますね、、、;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
removeAttribute()メソッドで削...
-
jQuery の jqPlotプラグイン
-
HTML id名とjavascript変数名
-
DOM操作(?)。idを数値順で上書...
-
classの中の<a>タグにidを追加
-
表示・非表示のスクリプトで、...
-
jQueryでクリックされた要素のi...
-
【JS】phpで作成した多数のdiv...
-
Jquery 親要素で順番入れ替え
-
iframe内のリンクが飛ばないの...
-
プルダウンメニューに画像を使...
-
MYSQLでの条件検索ORを使って・...
-
ポップアップをクリックで終了...
-
すみませ~~ん!助けてぇ!
-
クリックするとテーブルの列の...
-
removeEventListenerについて
-
テキストボックスに入力された...
-
javascriptでオブジェクトの重...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
iframe内のリンクが飛ばないの...
-
[急ぎ] videoタグで埋め込んだm...
-
背景色を透明化
-
console.log結果をhtmlで表示し...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
removeAttribute()メソッドで削...
-
テキストエリア内の一部の文字...
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
変数内容をHTML内で表示する方法
-
HTMLタグに複数のクラスを設定...
-
jQueryのアコーディオンメニュ...
-
取得した要素がインライン要素...
おすすめ情報