Arun Kumaresh Arun Kumaresh - 7 months ago 14
Javascript Question

jquery how to remove both the <tr> tag on click?

I have a

checkbox
which has
id
- when I select the
checkbox
-es and click the
button
, the
tr
tag should get removed; when I select the multiple
checkbox
-es both
tr
tag should get removed, but the thing is when I select the multiple
checkbox
-es only the
tr
tag belong to the 1st
id
get removed.

I have tried the following code

<script>
function getsample(val){

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



</script>
<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>
</tr>
<tr>
<td>student15</td>
<td>Student</td>
<td>CS</td>
<td>2</td>
<td>arung@gmail.com</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>arung@gmail.com</td>
<td><input name="chk" type="checkbox" id="sam2" ></td>
</tr>

</thead>
</tbody>
</table>
<input type="button" onClick="getsample()" id="button" value="Submit">

</body>
</html>


When I use
$("#"+this.id).closest('tr').remove();
inside the map function all the selected
tr
tag get removed, but I need to call
checkbox
id
outside the map function.

Help me, thanks in advance.

Answer

Change your getsample() function to following.

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>arung@gmail.com</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>arung@gmail.com</td>
            <td><input name="chk" type="checkbox" id="sam2"></td>
        </tr>
    </tbody>
</table>
<input type="button" onclick="getsample()" id="button" value="Submit">

Comments