39732


皆様いつもお世話になっております。  
標題の件、率直に言えば、以下HTMLで、table中のtrを削除したいのですが、class="appLineDummy"というtrは【除いた全て】を削除したいです。(DOMExporerの画像=が表れているのはこの為？！)

[![画像の説明をここに入力](https://i.stack.imgur.com/oKXXc.png)](https://i.stack.imgur.com/oKXXc.png)

div要素にはclass名が付いているので、こちらを起点とした処理を行うか、table中1行目のtrだけがclass名がついている状態なので、こちらを起点とした処理を行うか、になると思われます。

目的のtr要素数を得る上でlength();、子要素の参照にはchildren();、要素の削除にはremove();を利用する、という点までは認識できているのですが、  
children();を使ってみた時点で つまづいてしまったので今回のお問い合わせとなりました。

[code]

    //***div要素の中で、tr要素 class="appLineDummy"ではないtr要素を全て削除 ***
    //***一先ず何行あるか捉えてみる　↓ エラーになる***
        var rows = $(".appLines")[0].children().children();
        alert(rows.length + "行あります。");
    
[/code]

# ====質問====

当初の計画は、標題の件の達成を、$.eachの利用で考えておりましたが、こちらの手順に拘りありません。皆様でしたら一体どういったコーディングで当目的を達成するのでしょうか？  
厚かましいお願いですが、ヒントだけでも頂けましたら幸いです、よろしくお願い致します。


CC BY-SA 3.0
2017-11-21T05:21:28.037
39731
2017-11-22T02:19:13.700
25696
question
jquery html5
指定したdiv要素の子要素=tableの、更に子要素であるtrの数を知りたい


こんな感じでどうでしょうか？

[code]

    function trRemove(){
    /**
    Class"appLines"をもった"div"：(div.appLines)
    …の子孫にいる"table"：(table)
    …の子孫にいる"tr"のClass"appLineDummy"を"持たない"要素：(tr:not(.appLineDummy))
    **/
      var cnt = $("div.appLines table tr:not(.appLineDummy)").length;
      $("div.appLines table tr:not(.appLineDummy)").remove();
      console.log(cnt+"件のtrを削除しました。");
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button onclick="trRemove()">指定のtrを削除</button>
    <div class="appLines">
     <table>
      <tbody>
       <tr class="appLineDummy"><td>１</td></tr>
       <tr class=""><td>２</td></tr>
       <tr class=""><td>３</td></tr>
       <tr class=""><td>４</td></tr>
       <tr class=""><td>５</td></tr>
       <tr class=""><td>６</td></tr>
       <tr class=""><td>７</td></tr>
       <tr class=""><td>８</td></tr>
       <tr class=""><td>９</td></tr>
       <tr class=""><td>10</td></tr>
       <tr class=""><td>11</td></tr>
      </tbody>
     </table>
    </div>
[/code]


CC BY-SA 3.0
2017-11-21T05:31:48.357
39732
2017-11-21T05:50:23.523
2017-11-21T05:50:23.523
39731
answer


（本件については問題になりませんが）先の回答のように同じjQueryオブジェクトを複数回取得するのは望ましくありませんし、そもそも`remove`メソッドは削除したjQueryオブジェクトを返してくれるので、次のように記述するほうがベターだと思います。

[code]

    var cnt = $("div.appLines table tr:not(.appLineDummy)").remove().length;
    console.log(cnt+"件のtrを削除しました。");
    
[/code]


CC BY-SA 3.0
2017-11-22T02:19:13.700
39748
2017-11-22T02:19:13.700
9608
39731
answer