How to Delete Multiple Rows using jQuery

Submitted by: 
Language: 
Visitors have accessed this post 560 times.

Getting Started

First, we need Bootstrap and jQuery. These files are included in the downloadable of this tutorial but if you want, you can download them yourselves using the links below.

For Bootstrap
For jQuery

Creating our Database

Next, we create the database that contains the data that we are going to delete in this tutorial.

I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.

You should be able to create a database named dbtest.

Displaying our Table

Next, we display our table into our mark up with the checkboxes and the delete button.

Create a new file, name it as index.html and paste the codes below.

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>How to Delete Multiple Rows using jQuery</title>
  4. <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
  5. </head>
  6. <div class="container">
  7. <h1 class="text-center" style="margin-top:30px;">Delete Multiple Rows using jQuery</h1>
  8. <hr>
  9. <div class="row justify-content-center">
  10. <div class="col-sm-8">
  11. <div class="alert alert-danger text-center" style="display:none;">
  12. <button type="button" class="close" data-div="alert-danger" aria-label="Close">
  13. <span aria-hidden="true">&times;</span>
  14. </button>
  15. <span class="message"></span>
  16. </div>
  17. <div class="alert alert-success text-center" style="display:none;">
  18. <button type="button" class="close" data-div="alert-success" aria-label="Close">
  19. <span aria-hidden="true">&times;</span>
  20. </button>
  21. <span class="message"></span>
  22. </div>
  23. <button type="button" class="btn btn-danger" id="delete">Delete</button>
  24. <table class="table table-bordered" style="margin-top:15px;">
  25. <th><input type="checkbox" id="checkAll"></th>
  26. <th>ID</th>
  27. <th>Firstname</th>
  28. <th>Lastname</th>
  29. <th>Address</th>
  30. </thead>
  31. <tbody id="tbody">
  32. </tbody>
  33. </table>
  34. </div>
  35. </div>
  36. </div>
  37.  
  38. <script src="jquery/jquery.min.js"></script>
  39. <script src="app.js"></script>
  40. </body>
  41. </html>

Creating our jQuery Scripts

Next, we create our jquery scripts which contains all our jquery codes and ajax requests.

Create a new file, name it as app.js and paste the codes below.

  1. $(function(){
  2. fetch();
  3.  
  4. //check uncheck all
  5. $('#checkAll').click(function () {
  6. $('input:checkbox').not(this).prop('checked', this.checked);
  7. });
  8.  
  9. //removing alert
  10. $('.close').click(function(){
  11. var div = $(this).data('div');
  12. $('.'+div).hide();
  13. });
  14.  
  15. //delete items
  16. $('#delete').click(function(){
  17. var ids = $(".check:checked").map(function(){
  18. return $(this).val();
  19. }).toArray();
  20.  
  21. //check if a checkbox is checked
  22. if(jQuery.isEmptyObject(ids)){
  23. $('.alert').hide();
  24. $('.alert-danger').show();
  25. $('.message').html('Select row(s) to delete first');
  26. }
  27. //delete the checked rows
  28. else{
  29. $.ajax({
  30. type: 'POST',
  31. url: 'api.php?action=delete',
  32. data: {ids: ids},
  33. dataType: 'json',
  34. success: function(response){
  35. $('.alert').hide();
  36. $('.alert-success').show();
  37. $('.message').html(response);
  38. fetch();
  39.  
  40. }
  41. });
  42. }
  43.  
  44. });
  45.  
  46. });
  47.  
  48. function fetch(){
  49. $.ajax({
  50. type: 'POST',
  51. url: 'api.php',
  52. dataType: 'json',
  53. success: function(response){
  54. $('#tbody').html(response);
  55. }
  56. });
  57. }

Creating our PHP Api

Lastly, we create our PHP api which contains all our PHP codes.

Create a new file, name it as api.php and paste the codes below.

  1. <?php
  2. //connection
  3. $conn = new mysqli('localhost', 'root', '', 'dbtest');
  4.  
  5. $action = 'fetch';
  6. $output = '';
  7.  
  8. if(isset($_GET['action'])){
  9. $action = $_GET['action'];
  10. }
  11.  
  12. if($action == 'fetch'){
  13.  
  14. $sql = "SELECT * FROM members";
  15. $query = $conn->query($sql);
  16.  
  17. while($row = $query->fetch_assoc()){
  18. $output .= "
  19. <tr>
  20. <td><input type='checkbox' class='check' value='".$row['id']."'></td>
  21. <td>".$row['id']."</td>
  22. <td>".$row['firstname']."</td>
  23. <td>".$row['lastname']."</td>
  24. <td>".$row['address']."</td>
  25. </tr>
  26. ";
  27. }
  28.  
  29. }
  30.  
  31. if($action == 'delete'){
  32. $output = array('error'=>false);
  33. $ids = $_POST['ids'];
  34. $count = count($ids);
  35. $row = ($count == 1)? 'Row' : 'Rows';
  36.  
  37. foreach($ids as $id){
  38. $sql = "DELETE FROM members WHERE id = '$id'";
  39. $conn->query($sql);
  40. }
  41.  
  42. $output = $count.' '.$row.' deleted';
  43.  
  44. }
  45.  
  46. echo json_encode($output);
  47.  
  48. ?>

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.