Bdtjtk

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    

}  

?>

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>

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>

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/');



        }

    }