指定したdiv要素の子要素=tableの、更に子要素であるtrの数を知りたい

投稿者: Anonymous

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

画像の説明をここに入力

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

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

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

====質問====

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

解決

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

_x000D_

_x000D_

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

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<button onclick="trRemove()">指定のtrを削除</button>_x000D_
<div class="appLines">_x000D_
	<table>_x000D_
		<tbody>_x000D_
			<tr class="appLineDummy"><td>1</td></tr>_x000D_
			<tr class=""><td>2</td></tr>_x000D_
			<tr class=""><td>3</td></tr>_x000D_
			<tr class=""><td>4</td></tr>_x000D_
			<tr class=""><td>5</td></tr>_x000D_
			<tr class=""><td>6</td></tr>_x000D_
			<tr class=""><td>7</td></tr>_x000D_
			<tr class=""><td>8</td></tr>_x000D_
			<tr class=""><td>9</td></tr>_x000D_
			<tr class=""><td>10</td></tr>_x000D_
			<tr class=""><td>11</td></tr>_x000D_
		</tbody>_x000D_
	</table>_x000D_
</div>

_x000D_

_x000D_

_x000D_

回答者: user10259

Leave a Reply

Your email address will not be published. Required fields are marked *