- ベストアンサー
jQueryでclassを削除する方法
- jQueryを使用して、テーブルのthやtdの中に空白や未入力があった場合に、classの「tb_menu_border」を削除する方法について説明します。
- 具体的な記述方法として、以下のコードを使用することでクラスの削除が可能です。
- $(".tb_menu_border").text().replace(/\s+/g,'').length > 0 $("table").removeClass("tb_menu_border");
- korokorodaijin
- お礼率57% (4/7)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
class名が「tb_menu_border」すべてに対して空白、未入力の場合classの「tb_menu_border」を取り除くようにしました。 やりたいことはこれであってるかな？ $('[class="tb_menu_border"]').each(function(){ if ($(this).text().replace(/\s+/g,'').length == 0) { $(this).removeClass("tb_menu_border"); } });
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
//そのうち、きっとちゃんとした回答がつくでしょう！ //テーブル要素の 子孫要素で class が tb_menu_border のものを集めなきゃ！ var es = document.querySelectorAll ('table *.tb_menu_border'); //集めたものはノードリストなので配列とはちょっと違う、なのでコピーして配列に変えておこう！ es = Array.prototype.slice.call (es, 0); //そうそう、要素の持つテキストから空白を取り除いて、空白かどうか調べる関数が必要だな！ function isNoText (e) { return ! e.textContent.trim (); } //そうそう、空白なら class を消してしまう関数も必要だな！ function remove (e) { e.classList.remove ('tb_menu_border'); } es.filter (isNoText) /* ふるいにかけて、*/ .forEach (remove); // 消しちゃへ！ //あちゃぁ、querySelectorAll,tlim,classList,filte,forEach が使えないのがあるらしい。
お礼
詳しいご説明ありがとうございます！ 試してみたのですが、no.1さんの方に記述したのですが、どうも動作しないんですよね。
お礼
ありがとうございます！ 今、試してみたのですが、動作しないんですが、 この書き方だとおかしいですかね？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="table.js"></script> <link rel="stylesheet" type="text/css" href="test.css"/> <script type="text/javascript"> $('[class="tb_menu_border"]').each(function(){ if ($(this).text().replace(/\s+/g,'').length == 0) { $(this).removeClass("tb_menu_border"); } }); </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <table class="tb_menu"> <tr> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> </tr> <tr> <th class="tb_menu_border"></th> <td class="tb_menu_border"></td> <td class="td_menu_sp"></td> <th class="tb_menu_border"></th> <td class="tb_menu_border"> </td> <td class="td_menu_sp"> </td> <th class="tb_menu_border"> </th> <td class="tb_menu_border"> </td> <td class="td_menu_sp"> </td> </tr> </table> </body> </html>