How to delete a specific row with one delete button not a delete button in every row?

Question

Hope all be fine and do best. We can delete a specific row in PHP by having a button in every row, so if we don't have a delete button in every row just by having one delete button to delete the specific row how we can do that. for more information please check the image which uploaded.

<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" 
 aria-labelledby="modalDelete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold ml-5 text- 
danger">Delete</h4>
<button type="button" class="close text-danger" data-dismiss="modal" 
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-3">
<p class="text-center h4">Are you sure to delete selected record?</p>
</div>
<div class="modal-footer d-flex justify-content-center 
deleteButtonsWrapper">
<button type="submit" name="btnDeleteRec" class="btn btn-danger 
btnYesClass" id="btnYes">Yes</button>
<button type="submit" class="btn btn-primary btnNoClass" id="btnNo" data- 
dismiss="modal">No</button>
</div></div></div></div>

<table id="dtBasicExample" class="table table-striped table-bordered" 
cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm" style="width:20px; text-align:center;">ID</th>
<th class="th-sm" style="width:150px; text-align:center;">Name</th>
<th class="th-sm" style="width:150px; text-align:center;">Position</th>
<th class="th-sm" style="width:200px; text-align:center;">Image</th>
<th class="th-sm" style="text-align:center;" ><i style="margin- 
right:10px;" class="fa fa-facebook" aria-hidden="true"></i>Facebook</th>
<th class="th-sm" style="text-align:center;"><i style="margin- 
right:10px;" class="fab fa-twitter"></i>Twitter</th>
<th class="th-sm" style="text-align:center;"><i style="margin- 
right:10px;" class="fa fa-google-plus" aria-hidden="true"></i>Google Plus
</th></tr></thead>
<tbody>
<?php
while($datarecord=mysqli_fetch_assoc($resultrecord))
{
?>
<tr>
<td style="text-align:center;"><?php echo $datarecord["id"]; ?></td>
<td style="text-align:center;"><?php echo $datarecord["name"]; ?></td>
<td style="text-align:center;"><?php echo $datarecord["position"]; ?> 
</td>
<td style="text-align:center;">
<?php 
echo '<img src="images/'.$datarecord['image'].'" style="height:60px; 
width:65px;">';
?>
</td>
<td style="text-align:center;"><?php echo $datarecord["facebook"]; ?> 
</td>
<td style="text-align:center;"><?php echo $datarecord["twitter"]; ?></td>
<td style="text-align:center;"><?php echo $datarecord["googleplus"]; ?> 
</td>
</tr>
<?php    
}  
?>

Yes after selecting the row press delete button to become delete — Ahmad, Jan 02 '19 at 09:29
put the checkbox beside the id and on select checkbox use ajax call to delete selected checkbox — TarangP, Jan 02 '19 at 09:33
See I don't want to use any checkbox just when I clicked the row must be select and delete without of any checkbox is there any way. — Ahmad, Jan 02 '19 at 09:43
it doesent matter that if you use `checkbox` or `selecting a row`. code for both are same.the changes are only `on select of checkbox` or `on select of row` — TarangP, Jan 02 '19 at 09:45
Possible duplicate of [Delete multiple rows by selecting checkboxes using PHP](https://stackoverflow.com/questions/14475096/delete-multiple-rows-by-selecting-checkboxes-using-php) — TarangP, Jan 02 '19 at 10:22
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186046/discussion-between-tarangp-and-ahmad). — TarangP, Jan 02 '19 at 12:04

score 1 · Answer 1 · answered Jan 02 '19 at 07:42

You can do it using jquery see below, Very simple...

$('tr').click(function(){
  $(this).siblings().removeClass('selected');
  $(this).addClass('selected');
  $('.delete-row').removeAttr('disabled');
});

$('.delete-row').click(function(){
 $('tr.selected').remove();
 $('.delete-row').attr('disabled','disabled');
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
.delete-row {
 background-color:red;
 border-radius:4px;
 color:#FFF;
 display: block;
    margin: auto;
    margin-top: 30px;
    padding: 10px 20px;
}

.selected {
 outline : red solid 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>HTML Table</h2>

 <table id="tab">
   <tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
   </tr>
   <tr>
  <td>Alfreds Futterkiste</td>
  <td>Maria Anders</td>
  <td>Germany</td>
   </tr>
   <tr>
  <td>Centro comercial Moctezuma</td>
  <td>Francisco Chang</td>
  <td>Mexico</td>
   </tr>
   <tr>
  <td>Ernst Handel</td>
  <td>Roland Mendel</td>
  <td>Austria</td>
   </tr>
   <tr>
  <td>Island Trading</td>
  <td>Helen Bennett</td>
  <td>UK</td>
   </tr>
   <tr>
  <td>Laughing Bacchus Winecellars</td>
  <td>Yoshi Tannamuri</td>
  <td>Canada</td>
   </tr>
   <tr>
  <td>Magazzini Alimentari Riuniti</td>
  <td>Giovanni Rovelli</td>
  <td>Italy</td>
   </tr>
 </table>
 
 <button class="delete-row" disabled>
  Delete
 </button>

No, Not at all. It will work accordingly, just change the classes — ElusiveCoder, Jan 02 '19 at 09:35

score 0 · Answer 2 · answered Jan 03 '19 at 09:48

Please refer below code You can mention is into row/tr. Access tr attributes id and add into array. When clicking on button all selected rows will delete.

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
.delete-row {
    background-color:red;
    border-radius:4px;
    color:#FFF;
    display: block;
    margin: auto;
    margin-top: 30px;
    padding: 10px 20px;
}

.selected {
    outline : red solid 1px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>HTML Table</h2>

    <table id="tab">
      <tr id="1">
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr id="2">
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr id="3">
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr id="4">
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr id="5">
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr id="6">
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr id="7">
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
<button class="delete-row" disabled>
        Delete
    </button>
<script>
data = [];
$('tr').click(function(){
  //$(this).siblings().removeClass('selected');
  //$(this).addClass('selected');
  var elID = $(this).attr('id');  
  $("#" + elID).addClass('selected');
  data.push(elID);
  $('.delete-row').removeAttr('disabled');
});

$('.delete-row').click(function(){  
    console.log(data);
    for (var d=0; d<data.length; d++){              
        $("#" + data[d]).remove();      
    }
    data = [];
});
</script>

score -1 · Answer 3 · answered Jan 02 '19 at 08:01

i think you have to get the id of row in any way you want to delete.

if you dont want to put button in every row you can use check box and for the value of checkbox get the id of row or that post, collect all the check boxes that checked and delete it with one button and you can use ajax.

HERE THE CODE

**

NOTE : Im using php ,oop, and mvc and deleting with ajax.

** ========== HTML ===========

   <button onclick="delete_post();" class="delete_btn_selected ">
            delete
        </button>

    <table id="tablePublicNotif" >
        <thead>
        <tr>
            <th>delete</th>
            <th>
              <div class="delete_btn_check" >
                  <input type="checkbox"  class=" delete_btn_check" id="select-all-checkbox-public-notif" name="checked"  />
              </div>

            </th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td >
                        <input type="checkbox"  class=" delete_btn_check "  name="checked"   value="<?php echo $post->id ?>" />
                </td>
            </tr>

        </tbody>
    </table>

========== JAVASCRIPT ===========

$("#select-all-checkbox-public-notif").click(function () {
        $('#tablePublicNotif input:checkbox').not(this).prop('checked', this.checked);
    });

  var path_array = pathname.split("/");

        var delete_post  = function() {
            var categories = $(".delete_btn_check:checked").map(function () {
                return this.value
            }).get();

            $.ajax(path_array['0']+'/'+path_array['1']+'/'+path_array['2']+'/'+path_array['3']+ '/notifications/delete', {
                type : 'post',
                data: {
                    delete_arr_id: categories
                } ,
                success : function (data) {
                    var pathname = document.URL;
                    var path_array = pathname.split("/");
                    window.location =path_array['0']+'/'+path_array['1']+'/'+path_array['2']+'/'+path_array['3']+'/'+path_array['4']+'/notifications';
                }
            });
        };

========== PHP ===========

  public function delete(){
        if($_SERVER['REQUEST_METHOD'] == 'POST'){
            // this foreach loop throw array of ids
            foreach ($_POST['delete_arr_id'] as $id){
              // check if post exists
                $post = $this->NotifModel->getPostById($$id);
                // Check for owner
                if($post->user_id != $_SESSION['user_id']){
                    redirect('notifications/');
                }

                if(!empty($post)){
                  //if found post then delete
                    if($this->NotifModel->deletePost($id)){

                    } else {
                        die();
                    }
                }else{
                    redirect('notifications/');

                }
            }

        } else {
            redirect('notifications/');

        }
    }

Sir, I know to use the checkbox, but I don't want to use checkbox just after selecting the row you can be able to delete. — Ahmad, Jan 02 '19 at 09:30

How to delete a specific row with one delete button not a delete button in every row?

3 Answers3