CODEWITHSUNDEEP
javascriptjquery
Arun Kumaresh
Arun Kumaresh

Reputation: 6311

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

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>

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.

Upvotes: 1

Views: 97

Answers (3)

nicost
nicost

Reputation: 1040

You can remove all <tr> tags by using jquery to select all the input fields starting with the id "sam" (or name equal to or starting with "chk") which are checked. This can be done with $('[id^="sam"]:checked') where 'id^' stands for "id starting with". You can also remove the '^' for exact match or put 'name' instead of id.

Are working plunker can be found here .

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

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>[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">

Upvotes: 2

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You can directly loop through the checked check boxes, and remove the parent tr using $(this).closest("tr")

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

Fiddle

Upvotes: 2

Related Questions