Question

我为学习目的使用html，javascript和jquery制作了两个标签（Label1和Label 2以及每个标签的两个删除按钮）。

现在我希望在单击十字按钮时删除标签和按钮。

我试过

$(".labels").closest().remove();

但它不起作用。请帮忙

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 2</title>

</head>
<body>
	<div class="container">
		<div class="form-group row">
			<div class="col-md-2 labels">
				<label>Label 1 </label>
			</div>
			<div class="col-md-1" style="padding-bottom: 5px">
				<button class="btn btn-danger btn-xs removeBtn">
					<span class="glyphicon glyphicon-remove"></span>
				</button>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							var formGroupRowDiv = $(
									document.createElement('div')).attr(
									"class", 'form-group row');
							var labelTwoDiv = $(document.createElement('div'))
									.attr("class", 'col-md-2 labels');

							var removeBtnDiv = $(document.createElement('div'))
									.attr("class", 'col-md-1 removeBtn');

							labelTwoDiv.appendTo(formGroupRowDiv).html(
									'<label>Label 2</label>');

							removeBtnDiv
									.appendTo(formGroupRowDiv)
									.html('<button class="btn btn-danger btn-xs removeDate">'
													+ '<span class="glyphicon glyphicon-remove"></span>'
													+ '</button>');

							$(formGroupRowDiv).appendTo('.container');

							$(".removeBtn").click(function(e) {
								e.preventDefault();
								$(".labels").closest().remove();

							});
						});
	</script>
</body>
</html>

＆＃13;

Answer 1

试试这个：

$("body").click(".removeBtn", function(e) {
   $(e.target).parent().parent().siblings().find("label").remove()
});

由于您是动态生成div，因此无法将处理程序绑定到加载时出现的div。你需要把它绑定到更高的东西（比如正文）

e.target这里是removeBtn
.parent()将返回父
.siblings()将返回所有[父母的兄弟姐妹
.find()将过滤到已传递的选择器
.remove()会将其从DOM

Answer 2

基本上你在这里有4个问题：

您不想删除页面上存在的任何closest()元素的所有.labels元素（您要删除最接近该元素的特定.labels元素您刚刚点击的当前.removeBtn。
closest不是您要找的，而是prev元素。
由于您的HTML结构在您拥有的两个.removeBtn元素之间有所不同，因此您需要两个不同的选择器。

第一个选择器为$(this).prev('.labels')，第二个选择器为$(this).parent().prev('.labels')。

如果您还想删除刚刚点击的按钮，请使用$(this).remove();。

这是您的代码的第一步：

$(".removeBtn").click(function(e) {
  e.preventDefault();
  if ($(this).prev('.labels').length) {
    $(this).prev('.labels').remove();
  } else if ($(this).parent().prev('.labels').length) {
    $(this).parent().prev('.labels').remove();
  }
  $(this).remove();
});

这是一个工作片段：

$(document)
.ready(
  function() {
    var formGroupRowDiv = $(
      document.createElement('div')).attr(
      "class", 'form-group row');
    var labelTwoDiv = $(document.createElement('div'))
    .attr("class", 'col-md-2 labels');

    var removeBtnDiv = $(document.createElement('div'))
    .attr("class", 'col-md-1 removeBtn');

    labelTwoDiv.appendTo(formGroupRowDiv).html(
      '<label>Label 2</label>');

    removeBtnDiv
    .appendTo(formGroupRowDiv)
    .html('<button class="btn btn-danger btn-xs removeDate">'
          + '<span class="glyphicon glyphicon-remove"></span>'
          + '</button>');

    $(formGroupRowDiv).appendTo('.container');

    $(".removeBtn").click(function(e) {
      e.preventDefault();
      if ($(this).prev('.labels').length) {
        $(this).prev('.labels').remove();
      } else if ($(this).parent().prev('.labels').length) {
        $(this).parent().prev('.labels').remove();
      }
      $(this).remove();
    });
  });

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 2</title>

</head>
<body>
	<div class="container">
		<div class="form-group row">
			<div class="col-md-2 labels">
				<label>Label 1 </label>
			</div>
			<div class="col-md-1" style="padding-bottom: 5px">
				<button class="btn btn-danger btn-xs removeBtn">
					<span class="glyphicon glyphicon-remove"></span>
				</button>
			</div>
		</div>
	</div>
</body>
</html>

单击按钮时删除标签和按钮

2 个答案: