JavaScript Element.id の使い方

Question

こんにちは。現在JavaScriptを使用して開発を行って半年ほどの者です。
タイトルの件でわからない部分があり、ご教授をお願いしたいと思っております。

以下が該当のコードです。

//職人情報のテーブルリストを取得
var div_memberList = document.querySelectorAll("div.member_area");

	//指定されたグループの職人情報以外は非表示にする
	for (var i = 0;i < div_memberList.length;i++) {
		var table_memberList = div_memberList[i].children;
		var table_id = table_memberList.id;

		if (table_memberList.id != "table_" + groupId) {
			div_memberList[i].remove();
		}
	}

HTMLの該当コードはこの部分です

<div class="member_area">
　　<table id="table_<%= focusGroup.getId() %>" class="member_list table_hidden" >
        <tr>
            <th>
			<% if(target.equals("without")){ %>
				<button type="button" onclick="openAddWorkerWinodw('insert_window', <%= mCount %>)">
					職人を追加
				</button>
			<% } %>
		    </th>
		    <th id="name">名前</th>
	            <th id="price">単価</th>
			        <%= target.equals("without") ? "<th id='main_payment'>決済</th>" : "" %>
			        <%= target.equals("only") ? "<th id='delete_date'>削除日</th>" : "" %>
	    </tr>

        <%-- 各メンバーの名前、単価 --%>
	    <% ArrayList<Worker> members = focusGroup.getAllMember();
           for(int j = 0; j < members.size(); j++){
			   Worker focusMember = members.get(j);

			   //非表示日が決まっている場合は名前を赤で表示、非表示日が1か月以内なら行を赤く表示
			   String deleteDateStyle = "";

この<div class="member_area">は複数あります。そのそれぞれに<table id="table_<%= focusGroup.getId() %>" class="member_list table_hidden" >
を記述しています。このテーブル以外の要素は<div class="member_area">内にはありません。

このテーブルタグのIDをJavaScriptで取得したいのですが取得できずにいます。
どの部分の記述が間違っているのかご教授をお願いしたいと思っております。
よろしくお願いいたします。

Answer 1

JavaScript側が提示部分だけであれば、groupIdが定義されていません。あと、childrenはHTMLCollectionを返します。

var div_memberList = document.querySelectorAll("div.member_area");
var groupId = 5;

//指定されたグループの職人情報以外は非表示にする
for (var i = 0;i < div_memberList.length;i++) {
  var table_memberList = div_memberList[i].children;
  var table_id = table_memberList[0].id;//childrenはHTMLCollectionなので0番目
  if (table_id != "table_" + groupId) {
    div_memberList[i].remove();
  }
}
```**動くサンプル：**[https://jsfiddle.net/choxyh8b/](https://jsfiddle.net/choxyh8b/)

Comments

[Anon_tmr]

ご回答ありがとうございます。

私の知識不足でchildrenはHTMLCollectionを返すという事を認識していませんでした。
勉強します。ご教授ありがとうございました。

動くサンプルまで用意していただきお手数おかけしました。
ありがとうございました。

Answer 2

コードから察するに<div class="member_area">一つにtable一つ、という感じでしょうか？

でしたら、

var table_memberList = div_memberList[i].children;

ではなく、

var table_memberList = div_memberList[i].getElementsByTagName("table")[0];

または

var table_memberList = div_memberList[i].querySelector("table");

とするとHTMLCollectionではなくDOM要素一つが返されるのでうまく行くと思います。

それとhtmlについてですがこれはJavaサーブレットか何かのテンプレートでしょうか？
でしたら、細かいことですが、タグにJavaも加えた方がいいような気がしました。

Comments

[Anon_tmr]

ご回答ありがとうございました。

div_memberList[i].childrenという書き方だとHTMLCollecionが取得されるというのを知識不足で
認識していませんでした。ご教授ありがとうございました。
本件は無事解決いたしました。

タグの書き方も気を付けます！

Answer 3

member_areaはdivなので、tableを取得したいなら、

document.querySelectorAll('.member_list');

ではないでしょうか？
より厳密に次のように書いてもいいです。

document.querySelectorAll('div.member_area > table.member_list.table_hidden');

-- 11:58 追記
コード例を追記しようと思いましたが、idがわかっているならループするまでもありません。

var table = document.getElementById("table_" + groupId);
if (table) {
  table.parentNode.remove();
}

Comments

[Anon_tmr]

ご回答ありがとうございました！
divを取得して、そこからtableを取得...だと回りくどいですね。

本件は無事解決いたしました。ありがとうございます。