Comment supprimer une ligne spécifique avec un bouton de suppression et non un bouton de suppression dans chaque ligne?

Vous pouvez le faire en utilisant jquery voir ci-dessous, Très simple ...

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

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;
}

$('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');
});

Je pense que vous devez obtenir l'ID de la ligne de la manière que vous souhaitez supprimer.

Si vous ne voulez pas mettre de bouton dans chaque ligne, vous pouvez utiliser la case à cocher et pour la valeur de la case à cocher obtenir l'ID de la ligne ou cet article, rassemblez toutes les cases à cocher et supprimez-le avec un bouton et vous pouvez utiliser ajax.

ICI LE CODE

**

REMARQUE: J'utilise php, oop et mvc et je supprime avec ajax.

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

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

        }
    }

========== 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 ===========

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

Veuillez vous référer au code ci-dessous Vous pouvez mentionner est dans la ligne / tr. Accédez à l'identifiant des attributs tr et ajoutez-les au tableau. En cliquant sur le bouton, toutes les lignes sélectionnées seront supprimées.

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