jQueryで中身が空のDOMを削除したい

勉強日記
この記事は約2分で読めます。

jQueryでなぜか空判定されない

wordpressの記事でテーブルを使って書きたい記事があったのですが、テーブルを作ってみるとなぜか特定のテーブルにだけ

 

が足される・・・。
足されるだけならいいのですが、幅を持っているのでそこだけモコっと膨らむんですよね。
勝手に足される現象については分からなかったので、仕方ないので、jQueryでサクっと中身が無い要素だけ消そうと思います。
色々調べていると、世の中には頭がいい人だらけなのでサンプルソースがいっぱい出てきます。
その中でも良さそうな物がありました。

$empty = $(‘td’);
if($.trim($empty.text())== ”){
console.log(‘empty’);
}

変数にtd要素を入れて、トリムで余計な文字列を削って最終的にtextで中身が「”」ならtdの中には何も無いという事になりますね。
シンプルだけど、とても良さそうなので、これにtdの数だけ繰り返す様にしてあげます。

$(function(){
for (var i=0; i<$(‘td’).length; i++){
$tmp = $(this);
if($.trim($tmp.text())== ”){
console.log(‘empty’);
}
}
})

今は特に削除もしていませんが、中身が空の要素があれば条件に引っかかってemptyが返ってくるハズ!

JQueryでなぜかemptyが表示されない

javascriptにはあんまり自信が無いので、もしや動いていないのではと思い、繰り返しにの所に数を数える様に足しました。
その結果tdの数だけちゃんと動いています。

という事は、ifの判定の所で引っかかってないという事になります、謎だ。

がここでHTMLの内容を見ていて問題発覚。
仮に空の要素が発見出来ても、普通にテーブルとして使う要素の中にも空のtdがある。
そりゃそうですよね、長いテーブルを使っていたら、セルが空の場合もあります。
仕方が無いので、下記の様に愚直に1つずづ消す事にしました。

$('クラス').find('td:last').remove();

幸いな事に共通して足される部分はちょっと特殊なクラスを使っていて、ラストのtd要素だったので、これをクラス毎に何個か書いてあげるだけで消えました。
まだ謎は残っていますが、とりあえずやりたい事は達成出来ました。
それにしても何で謎要素が足されるんだろ。

コメント

Translate »
タイトルとURLをコピーしました