2016-04-18 11 views
1

checkbox -esを選択してbuttonをクリックするとのcheckboxがあります。trタグは削除されます。複数のcheckbox -esを選択すると、trタグが削除されるはずですが、複数を選択すると、-trタグが1つ目のidにのみ削除されます。jqueryクリックで<tr>タグを削除するにはどうすればよいですか?

私は、次のコード

jQueryの

<script> 
    function getsample(val) { 
     $(function() { 
      checkboxid = $('input[name="chk"]:checked').map(function() { 
       return this.id 
      }).get(); 
     }); 
     $("#" + checkboxid).closest('tr').remove(); 
    } 
</script> 

HTML

<html> 
<body> 
    <table> 
     <tbody> 
     <thead> 
      <tr> 
       <th>UserName</th> 
       <th>Role</th> 
       <th>Department</th> 
       <th>Semester</th> 
       <th>Email</th> 
       <th>Action</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>student15</td> 
       <td>Student</td> 
       <td>CS</td> 
       <td>2</td> 
       <td>[email protected]</td> 
       <td><input name="chk" type="checkbox" id="sam1"></td> 
      </tr> 
      <tr> 
       <td>student16</td> 
       <td>Student</td> 
       <td>CS</td> 
       <td>2</td> 
       <td>[email protected]</td> 
       <td><input name="chk" type="checkbox" id="sam2"></td> 
      </tr> 
     </tbody> 
    </table> 
    <input type="button" onclick="getsample()" id="button" value="Submit"> 
</body> 
</html> 

私が選択したすべてのtrタグが削除されますmap関数の内部で$("#"+this.id).closest('tr').remove();を使用して試してみました私は0123に電話する必要がありますid地図の外に機能します。

おかげさまで、よろしくお願いいたします。

答えて

2

変更あなたの​​機能を使用することができます。

function getsample(val) { 
 
    $('input[name="chk"]:checked').closest('tr').remove(); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
     <tr> 
 
      <th>UserName</th> 
 
      <th>Role</th> 
 
      <th>Department</th> 
 
      <th>Semester</th> 
 
      <th>Email</th> 
 
      <th>Action</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>student15</td> 
 
      <td>Student</td> 
 
      <td>CS</td> 
 
      <td>2</td> 
 
      <td>[email protected]</td> 
 
      <td><input name="chk" type="checkbox" id="sam1"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>student16</td> 
 
      <td>Student</td> 
 
      <td>CS</td> 
 
      <td>2</td> 
 
      <td>[email protected]</td> 
 
      <td><input name="chk" type="checkbox" id="sam2"></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<input type="button" onclick="getsample()" id="button" value="Submit">

2

あなたは直接確認し、チェックボックスをループし、親TRを削除するには、次のように$(this).closest("tr")

$("#button").click(function() { 
    $("[name='chk']:checked").each(function() { 
    $(this).closest("tr").remove(); 
    }); 
}); 

Fiddle

0

あなたがチェックされているすべての入力フィールドID「SAM」で始まる(またはそれに等しい名または「CHK」で始まる)を選択するためにjqueryのを使用して、すべての<tr>のタグを削除することができます。これは$('[id^="sam"]:checked')で行うことができます。ここで、「id ^」は「id is starting with」を表します。完全一致の場合は '^'を削除するか、idの代わりに 'name'を入力することもできます。

作業中のプランカーはhereです。

関連する問題