Удалить строку из таблицы после нажатия кнопки

У меня есть кнопка удаления в каждой строке таблицы. когда пользователь нажимает кнопку «Удалить», появляется модальный запрос пользователя «Вы уверены, что хотите удалить эту запись?». Если пользователь нажимает «да», строка будет удалена из таблицы.Удалить строку из таблицы после нажатия кнопки

Я пытался делать

$(this).closest('tr').remove();

Но это не работает.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" 
 
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script 
 
\t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
.hidden { 
 
\t display: none; 
 
} 
 
</style> 
 
<title>Form</title> 
 

 
</head> 
 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
\t <div class="container"> 
 
\t \t <div class="panel"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-12"> 
 
\t \t \t \t \t <table id="mytable" class="table"> 
 
\t \t \t \t \t \t <thead> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <th class="text-center">ID</th> 
 
\t \t \t \t \t \t \t \t <th class="text-center">Name</th> 
 
\t \t \t \t \t \t \t \t <th class="text-center">Delete</th> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </thead> 
 
\t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td>1</td> 
 
\t \t \t \t \t \t \t \t <td>John</td> 
 
\t \t \t \t \t \t \t \t <td class="text-center"><p data-placement="top" 
 
\t \t \t \t \t \t \t \t \t \t data-toggle="tooltip" title="Delete"> 
 
\t \t \t \t \t \t \t \t \t \t <button class="btn btn-danger btn-xs deletebtn" 
 
\t \t \t \t \t \t \t \t \t \t \t data-title="Delete" data-toggle="modal" 
 
\t \t \t \t \t \t \t \t \t \t \t data-target="#deletemodal"> 
 
\t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-trash"></span> 
 
\t \t \t \t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t \t \t </p></td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td>2</td> 
 
\t \t \t \t \t \t \t \t <td>Mary</td> 
 
\t \t \t \t \t \t \t \t <td class="text-center"><p data-placement="top" 
 
\t \t \t \t \t \t \t \t \t \t data-toggle="tooltip" title="Delete"> 
 
\t \t \t \t \t \t \t \t \t \t <button class="btn btn-danger btn-xs deletebtn" 
 
\t \t \t \t \t \t \t \t \t \t \t data-title="Delete" data-toggle="modal" 
 
\t \t \t \t \t \t \t \t \t \t \t data-target="#deletemodal"> 
 
\t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-trash"></span> 
 
\t \t \t \t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t \t \t </p></td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td>3</td> 
 
\t \t \t \t \t \t \t \t <td>Jane</td> 
 
\t \t \t \t \t \t \t \t <td class="text-center"><p data-placement="top" 
 
\t \t \t \t \t \t \t \t \t \t data-toggle="tooltip" title="Delete"> 
 
\t \t \t \t \t \t \t \t \t \t <button class="btn btn-danger btn-xs deletebtn" 
 
\t \t \t \t \t \t \t \t \t \t \t data-title="Delete" data-toggle="modal" 
 
\t \t \t \t \t \t \t \t \t \t \t data-target="#deletemodal"> 
 
\t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-trash"></span> 
 
\t \t \t \t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t \t \t </p></td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" 
 
\t \t aria-labelledby="delete" aria-hidden="true"> 
 
\t \t <div class="modal-dialog"> 
 
\t \t \t <div class="modal-content"> 
 
\t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t <button type="button" class="close" data-dismiss="modal" 
 
\t \t \t \t \t \t aria-hidden="true"> 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <h4 class="modal-title custom_align" id="Heading">Delete this 
 
\t \t \t \t \t \t entry</h4> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="modal-body"> 
 

 
\t \t \t \t \t <div class="alert alert-danger"> 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-warning-sign"></span> Are you 
 
\t \t \t \t \t \t sure you want to delete this Record? 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div class="modal-footer "> 
 
\t \t \t \t \t <button type="button" class="btn btn-success" id="confirmdeletebtn"> 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-ok-sign"></span> Yes 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <button type="button" class="btn btn-default" data-dismiss="modal"> 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-remove"></span> No 
 
\t \t \t \t \t </button> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <script type="text/javascript"> 
 
\t \t $(document).ready(function() { 
 
\t \t \t $("#confirmdeletebtn").click(function() { 
 
\t \t \t \t alert("in delete btn"); 
 
\t \t \t \t $(this).closest('tr').remove(); 
 

 
\t \t \t }); 
 
\t \t }); 
 
\t </script> 
 
</body> 
 

 
</html>

источник

2016-12-28 user2313232

Как вы загружаете данные в таблицу или просто статичны? –

да данные статические – user2313232

Возможный дубликат [Удалить строку таблицы после нажатия кнопки удаления строки строки таблицы] (http://stackoverflow.com/questions/11553768/remove-table-row-after-clicking-table-row-delete-) – Banzay

Одним из способов были бы переключить selected класс на строку, когда кнопка удаления в строке щелкнула ... затем удалить строку с этим классом с помощью кнопки модальной

$('.deletebtn').click(function(){ 
    // remove selected class from other rows 
    $('tr.selected').removeClass('selected'); 
    // add selected class to current row 
    $(this).closest('tr').addClass('selected'); 
}); 

$("#confirmdeletebtn").click(function() {  
    $('tr.selected').remove(); 
});

источник

2016-12-28 23:28:51 charlietfl

-1

enter code here функция DeleteRows() { предупреждение ("в БТН удаления"); $ (this) .closest ('li'). Remove(); };

источник

2016-12-28 23:28:10

you shoud use Список его легко сравнить с таблицей –

Бутстраповских модальный обеспечивает relatedTarget (щелкнуло элемент) на shown.bs.modal и show.bs.modal событий.

Таким образом, вы можете сохранить ссылку и использовать его при удалении

$(document).ready(function() { 
 
    
 
    $('#deletemodal').on('shown.bs.modal', function(e) { 
 
    // store the clicked element as data on the confirm button 
 
    $('#confirmdeletebtn').data('triggered-from', e.relatedTarget); 
 
    }); 
 
    
 
    $("#confirmdeletebtn").click(function() { 
 
    // retrieve the button that triggered the action and use it 
 
    var trigger = $(this).data('triggered-from'); 
 
    $(trigger).closest('tr').remove(); 
 
    $('#deletemodal').modal('hide'); 
 
    }); 
 
    
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="panel"> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <table id="mytable" class="table"> 
 
      <thead> 
 
       <tr> 
 
       <th class="text-center">ID</th> 
 
       <th class="text-center">Name</th> 
 
       <th class="text-center">Delete</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>1</td> 
 
       <td>John</td> 
 
       <td class="text-center"> 
 
        <p data-placement="top" data-toggle="tooltip" title="Delete"> 
 
        <button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal"> 
 
         <span class="glyphicon glyphicon-trash"></span> 
 
        </button> 
 
        </p> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>2</td> 
 
       <td>Mary</td> 
 
       <td class="text-center"> 
 
        <p data-placement="top" data-toggle="tooltip" title="Delete"> 
 
        <button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal"> 
 
         <span class="glyphicon glyphicon-trash"></span> 
 
        </button> 
 
        </p> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>3</td> 
 
       <td>Jane</td> 
 
       <td class="text-center"> 
 
        <p data-placement="top" data-toggle="tooltip" title="Delete"> 
 
        <button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal"> 
 
         <span class="glyphicon glyphicon-trash"></span> 
 
        </button> 
 
        </p> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="delete" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
 
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
 
      </button> 
 
      <h4 class="modal-title custom_align" id="Heading">Delete this 
 
\t \t \t \t \t \t entry</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 

 
      <div class="alert alert-danger"> 
 
      <span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record? 
 
      </div> 
 

 
     </div> 
 
     <div class="modal-footer "> 
 
      <button type="button" class="btn btn-success" id="confirmdeletebtn"> 
 
      <span class="glyphicon glyphicon-ok-sign"></span> Yes 
 
      </button> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal"> 
 
      <span class="glyphicon glyphicon-remove"></span> No 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-12-28 23:44:03

this ключевое слово здесь сослаться на кнопку подтверждения в модальном диалоговом окне, которое не имеет ничего общего с которым tr быть удаленным. Во-первых, вам нужно будет прослушать клики на кнопке .deletebtn. Эта функция при запуске должна показывать модальный диалог и прослушивать событие click на кнопке #confirmdeletebtn. Если пользователь нажимает на него, вы должны удалить tr, который был закрыт кнопкой .deletebtn, которая была нажата (таким образом, ссылка на нее должна быть сохранена после ее нажатия).

$(function(){ 
    var clickedBtn = null; 
    $(".deletebtn").click(function(){ 
    clickedBtn = this; 

    // show the modal dialog 
    }); 

    $("#confirmdeletebtn").click(function(){ 
    if(clickedBtn){ // make sure we have assigned a reference 
     $(clickedBtn).closest("tr").remove(); 
     clickedBtn = null; // not necessary 

     // close the modal dialog. 
    } 
    }); 

    // add listeners for the close and abort buttons of the modal dialog if not already handeled by bootstrap or whatever you're using. 
});

источник

2016-12-29 00:03:56

Удалить строку из таблицы после нажатия кнопки

ответ

Смежные вопросы