jqueryで、あるタグが削除された時に、変わりのタグやテキストを表示する条件式について

jqueryを使い、あるタグが削除された時に、変わりのタグやテキストを表示させたいのですがうまくいきません。
<script type="text/javascript">
$(function() {
$("table tr th.emp:empty").closest("table").remove();
});
</script>

<div id="content">
<table>
<tr>
<th>題名</th>
<td class="emp"></td>
</tr>
</table>
</div>

<td class="emp"></td>が空白の場合、tableタグが削除されソースは<div id="content"></div>となりますが、
tableタグが削除されたときに、新たなタグやテキストを入れることはできるのでしょうか？

<div id="content">該当するデータはありません</div>などと入れられたらと思っています。
以下のようにしてみましたが、当然ダメでした。

<script type="text/javascript">
$(function() {
$("table tr th.emp:empty").closest("table").remove();
});
</script>
<script type='text/javascript'
$(window).load(function(){
$("div#content:empty").text("該当するデータはありません")
});
</script>

質問者からの補足コメント

• 

  すいません、お礼の後に追記させていただきます。
  
  jQueryだからチェック不要とのことでしたが、下のNo.1のご回答の
  ＞if(td.length) td.closest("table").parent().html(cmt);
  .lengthはどのような条件判別をしているものなのでしょうか？
  
  .lengthというと文字列の長さを取得しているものかと思うのですが、この場合にはどのような条件判断をしているのかがわかりません。
  
  もしよろしければ教えて頂ければ幸いです。

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/02/15 15:43

No.3 ベストアンサー 回答者： fujillin 回答日時： 2016/02/15 17:45

ANo1、2です。

jQueryの場合、$(selector) で取得するのは、jQuery独特のjQuery objectというものです。
対象が単数でも複数でも同じように扱えるように考えられていて、その要素数を取得するにはlength属性を参照すればよいようになっています。
http://api.jquery.com/length/

それなので、if(td.length) では要素があること（1以上である）をチェックしていましたが、jQueryの場合は該当要素が無い場合は、メソッドが無視されるようにできているので、チェックも不要であったという意味です。

通常のjavascriptでは単数の要素と複数の要素（要素リストなど）では扱いが変わりますし、要素が無い場合に何らかの処理をしようとすると、そこでエラーとなる場合があるので、ついうっかりと、いらぬチェックを書いてしまった次第です。

この回答へのお礼

ご丁寧でわかりやすいご回答本当にありがとうございました。
jQueryはとても便利なので、ついつい安易に使いがちですが、その分知識が浅くなってしまうため、とても勉強になりました。
ありがとうございました。

お礼日時：2016/02/15 19:13

No.2 回答者： fujillin 回答日時： 2016/02/15 14:31

ANo1です。

訂正です。

jQueryだから、チェック不要でしたね。
　$("table tr td.emp:empty").closest("table").parent().html(cmt);
でよいはずでした。

この回答へのお礼

ご回答ありがとうございます。
期待通りの動きをしてくれました。

＞ご提示のスクリプトは$("table tr th.emp:empty")となっていますが、HTMLではempクラスのthはなくｔｄが存在している。
th.empではなくtd.empの記述ミスです。申し訳ありません。

＞クラス名empってemptyじゃない場合もあるのだろうか？（なんとなくemptyと等価に思える）
質問の記述及び説明がわかりにくくて申し訳ありません。
おっしゃる通りempはemptyするためのタグを判断するためにつけたクラス名です。
この場では実際のソースを記述せずに、わかりやすいようにソースを変えて記述したのですが、この質問の場ではクラス名empは必要ありませんでしたね。
実際のソースではclass="emp"のtdが空白ならばということで、tdにはクラス名empをつけています。

なので、
＞親要素が<div id="content">と決まっているなら、対象とする要素はこれに決まっているので、この内容をチェックする記述法にすべき。
というのもまさにその通りだと思います。
もう少しわかりやすく、文章およびソースを記述するべきでした。

＞想像するところ、出力側でこのようなクラスを付けてきているのだろうけれど、それならその時点で、tableの代わりにテキストを入れたHTMLを出力するのが本来ではなかろうか？
まさにおっしゃる通りで出力側でこのクラス名をつけています。
本来でしたらば、tableの代わりにテキストを入れたHTMLを出力する方法がいいのですが、その方法がわからず、とりあえずjQueryを利用することにしました。

まだまだ勉強不足です。。。
本当にありがとうございました。

お礼日時：2016/02/15 15:04

No.1 回答者： fujillin 回答日時： 2016/02/15 13:30

こんにちは

ご質問に対する方法としては、削除したいtableの親要素の内容をコメントで書き換えてしまえば良いですが、なさろうとしていることの意味がいまいちすっきりしませんね。

親要素が<div id="content">と決まっているなら、対象とする要素はこれに決まっているので、この内容をチェックする記述法にすべき。
ご提示のスクリプトは$("table tr th.emp:empty")となっていますが、HTMLではempクラスのthはなくｔｄが存在している。
クラス名empってemptyじゃない場合もあるのだろうか？（なんとなくemptyと等価に思える）想像するところ、出力側でこのようなクラスを付けてきているのだろうけれど、それならその時点で、tableの代わりにテキストを入れたHTMLを出力するのが本来ではなかろうか？

などなど、いろいろ疑問はありますが・・・
$(function(){
var cmt = "表示するテキスト";
var td = $("table tr td.emp:empty");
if(td.length) td.closest("table").parent().html(cmt);
});