delete a multiple selected rows in jquery

I have numbers of rows in a grid. The first column is an checkbox. If I check that checkbox and click on delete button, the checked row should be delete. Incase If I check more than 10 rows randomly, the selected rows should be delete. How can I do this using jquery.

JsFiddle

Please look at this fiddle. Here, if I select 2nd and 5th row checkbox and if i press delete button, the 2nd and 5th row should be delete. It should happen dynamically not in static. As an example I have mension 2nd and 5th. If I select multiple checkbox in a table, need to delete all selected rows. Please help me how can I do this?

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}
<br><br>
<input type="button" value ="Delete">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>

Answers 1

  • Try this : Register a click handler for delete button (assigne some id to button as shown below). Inside click handler, find all check boxes in table and call remove on parent tr using closest.

    Note: Don't forget to include jQuery library file in your code. e.g. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    HTML:<input type="button" value="Delete" id="deleteBtn">

    jQuery:

    $(function() {
      $("#deleteBtn").click(function() {
        $("#codexpl").find("input[type='checkbox']:checked").closest("tr").remove();
      });
    });
    

    JSFiddle Link


Related Articles