单击按钮后从表中删除行答案

【问题标题】：Delete row from table after button clicked单击按钮后从表中删除行
【发布时间】：2016-12-29 08:03:56
【问题描述】：

我的表格的每一行都有一个删除按钮。当用户点击删除按钮时，会弹出一个模态框提示用户“你是确定要删除此记录吗？”。如果用户单击“是”，该行将从表中删除。

我试过了

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

但它不起作用。

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

</head>
<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
						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>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#confirmdeletebtn").click(function() {
				alert("in delete btn");
				$(this).closest('tr').remove();

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

</html>

【问题讨论】：

您是如何将数据加载到表中的还是只是静态的？
是的，数据是静态的
Remove table row after clicking table row delete button的可能重复
加载模式后，原始点击事件就会丢失。当用户确认删除时，您希望保存该原始点击事件的位置并在您的模式代码中访问它。到目前为止，您的 javascript 仅限于模式窗口。

标签： javascript jquery

【解决方案1】：

一种方法是在单击行中的删除按钮时切换行上的 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();
});

【讨论】：

【解决方案2】：

引导模式向shown.bs.modal 和show.bs.modal 事件提供relatedTarget（被点击的元素）。

这样你可以存储引用并在删除时使用它

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

【讨论】：

【解决方案3】：

这里的this关键字是指模态对话框中的确认按钮，与要删除的tr无关。首先，您必须监听.deletebtn 按钮上的点击。此函数在触发时应显示模态对话框并侦听#confirmdeletebtn 按钮上的单击事件。如果用户单击它，那么您应该删除关闭了单击的.deletebtn 按钮的tr（因此一旦单击它就应该保存它的引用）。

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

【讨论】：

【解决方案4】：

enter code here 函数删除行（）{ alert("在删除 btn"); $(this).closest('li').remove(); };

【讨论】：

你应该使用 List 它的简单比较表