0

皆様いつもお世話になっております。
標題の件、率直に言えば、以下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の利用で考えておりましたが、こちらの手順に拘りありません。皆様でしたら一体どういったコーディングで当目的を達成するのでしょうか?
厚かましいお願いですが、ヒントだけでも頂けましたら幸いです、よろしくお願い致します。

2 件の回答 2

1

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

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を削除しました。");
}
<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>1</td></tr>
			<tr class=""><td>2</td></tr>
			<tr class=""><td>3</td></tr>
			<tr class=""><td>4</td></tr>
			<tr class=""><td>5</td></tr>
			<tr class=""><td>6</td></tr>
			<tr class=""><td>7</td></tr>
			<tr class=""><td>8</td></tr>
			<tr class=""><td>9</td></tr>
			<tr class=""><td>10</td></tr>
			<tr class=""><td>11</td></tr>
		</tbody>
	</table>
</div>

3
  • いつもお世話になっております。ご支援をありがとうございます。 実は...appLineDummyというクラス名がついたtr以外は、別のJQueryで動的に生成された要素です。 早速コピペして適用したところ、カウントの表示も削除された行も0でした。これはどうにかなるものでしょうか? 甘えてすみません.... (ご提示のスニペットは無事動作できたので、動的な要素に適用できない自分の未熟さが問題と思いました)
    – saya24
    2017年11月21日 5:47
  • @saya24 すみません。よく見たらdivのクラスを間違えていました。直したのとコードにコメントを追記したのでjQueryのセレクタを解読してみてください
    – user10259
    2017年11月21日 5:51
  • 動的な要素が問題かと思ったら違ったのですね。コメント内容、よく理解できました、また今後の糧になりました。いつもありがとうございます。
    – saya24
    2017年11月21日 7:42
0

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

var cnt = $("div.appLines table tr:not(.appLineDummy)").remove().length;
console.log(cnt+"件のtrを削除しました。");
1
  • ご見解ありがとうございます。まだまだ話についていけないので、ゆっくりご提案の方式を確認させて頂きます。
    – saya24
    2017年11月22日 3:11

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。