チェックボックスで選択した行のみを削除する機能

追加ボタン(add)を押下するとjQueryで記述した行が指定のtable(sample_table)に追加され、
追加された行の1列目に配置したチェックボックスを押下すると、選択した行のみが削除される機能を持ったJSPを作成したいのですが、
下記のコードを実行すると、指定のtableに追加が行われるのですが、削除ボタンを押下すると、チェックボックスで選択を行っていない行まで全て削除されてしまいます。
おそらく、$(this).closest('tr').remove();のtrと指定しているところが良くないと考えていますが、どのように指定すれば、チェックボックスで選択した行のみを削除するには、
どのように指定すればよいでしょうか？
分かる方教えてください。

<table
									class="demo"
									id="demo1">
									<thead>
										<tr>
											<th>1</th>
											<th>2</th>
											<th>3</th>
											<th>4</th>
											<th>5</th>
											<th>6</th>
											<th>7</th>
									</thead>
									<tbody id="sample_table">
										<tr>
										</tr>
									</tbody>
								</table>
								
								<button type="button" id="add" name="sampleadd"
						class="btn  margin-bottom"
						style="color: #ffffff; background-color: #40b740;">追加</button>
						
						<button type="button" id="del" name="sampledel"
						class="btn  margin-bottom"
						style="color: #ffffff; background-color: #40b740;">削除</button>





$('#add').click(function() {
var tr = '<tr><td><input type="checkbox" name="checkbox" value="'
										+ (cnt + 1)
										+ '"></td><td>'
										+ tesuto
										+ '</td><td>'
										+ "resuto21"
										+ '</td><td>'
										+ "tesuto3"
										+ '</td><td>'
										+ "tesuto4"
										+ '</td><td>'
										+ "tesuto5"
										+ '</td><td>'
										+ tesuto6 + '</td></tr>';
								$('#sample_teble').append(tr);
									}

							});
								
								
								
$('#del').on("click", function() {
				
				$('#sample_table input[type=checkbox]:checked').each(function() {
										$(this).closest('tr').remove();
				});
			});

行動規範の内容に同意します

回答2件

del処理については見た感じ大丈夫そうですが、hasで判断すればeachしなくても済むかもしれません

javascript
1<style>
2.btn{color: #ffffff; background-color: #40b740;}
3</style>
4<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5<script>
6$(function(){
7  var cnt=0;
8  $('#add').on('click',function(){
9    $('#sample_table').append(
10      $('<tr>').append(
11        $('<td>').append($('<input>').attr({type:"checkbox",name:"checkbox"}).val(++cnt)).append(cnt),
12        $('<td>').text('resuto2'),
13        $('<td>').text('resuto3'),
14        $('<td>').text('resuto4'),
15        $('<td>').text('resuto5'),
16        $('<td>').text('resuto6'),
17        $('<td>').text('resuto7')
18        )
19      );
20  });
21  $('#del').on("click", function() {
22    $('#sample_table tr').has('input[type=checkbox]:checked').remove();
23  });
24});
25
26</script>
27
28<button type="button" id="add" name="sampleadd" class="btn  margin-bottom">追加</button>
29<button type="button" id="del" name="sampledel" class="btn  margin-bottom">削除</button>
30
31<table class="demo" id="demo1">
32<thead>
33<tr>
34<th>1</th>
35<th>2</th>
36<th>3</th>
37<th>4</th>
38<th>5</th>
39<th>6</th>
40<th>7</th>
41</thead>
42<tbody id="sample_table">
43</tbody>
44</table>
45

投稿2017/04/28 07:28

編集2017/04/28 07:35

yambejp

総合スコア114829

ベストアンサー

へんなスペルミスとかを直せば、チェックボックスで選択した行のみを削除する動きは実現できていましたよ。
気になる点は、jQueryのclosestは1.8以降削除されているメソッドなのでparentsなどに変えたほうがよい点と、#sample_tableはtbodyではなくtableに指定すべきという点くらいです。

html
1<html>
2<head>
3<meta charset="utf-8">
4<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
5<script>
6$(function(){
7	$('#add').on("click", function() {
8		var tr = '<tr><td><input type="checkbox" name="checkbox" value="' + "val" + '"></td><td>' + "val" + '</td><td>' + "resuto21" + '</td><td>' + "tesuto3" + '</td><td>' + "tesuto4" + '</td><td>' + "tesuto5" + '</td><td>' + "val" + '</td></tr>';
9		$('#sample_table').append(tr);
10	});
11
12	$('#del').on("click", function() {
13		$('#sample_table input[type=checkbox]:checked').each(function() {
14			$(this).closest('tr').remove();
15		});
16	});
17});
18</script>
19</head>
20<body>
21
22<table id="sample_table" class="demo">
23<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th></tr>
24</table>
25
26<button type="button" id="add" name="sampleadd" class="btn  margin-bottom" style="color: #ffffff; background-color: #40b740;">追加</button>
27<button type="button" id="del" name="sampledel" class="btn  margin-bottom" style="color: #ffffff; background-color: #40b740;">削除</button>
28
29</body>
30</html>