当按钮被点击时删除标签和按钮

问题描述：

我已经为我的学习目的使用html，javascript和jquery制作了两个标签（标签1和标签2以及每个标签的两个删除按钮）。当按钮被点击时删除标签和按钮

现在我想要标签和按钮被删除，当十字按钮被点击。

我试图

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

但它不工作。请帮助

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" 
 
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script 
 
\t 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> 
 
\t <div class="container"> 
 
\t \t <div class="form-group row"> 
 
\t \t \t <div class="col-md-2 labels"> 
 
\t \t \t \t <label>Label 1 </label> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-1" style="padding-bottom: 5px"> 
 
\t \t \t \t <button class="btn btn-danger btn-xs removeBtn"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-remove"></span> 
 
\t \t \t \t </button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <script type="text/javascript"> 
 
\t \t $(document) 
 
\t \t \t \t .ready(
 
\t \t \t \t \t \t function() { 
 
\t \t \t \t \t \t \t var formGroupRowDiv = $(
 
\t \t \t \t \t \t \t \t \t document.createElement('div')).attr(
 
\t \t \t \t \t \t \t \t \t "class", 'form-group row'); 
 
\t \t \t \t \t \t \t var labelTwoDiv = $(document.createElement('div')) 
 
\t \t \t \t \t \t \t \t \t .attr("class", 'col-md-2 labels'); 
 

 
\t \t \t \t \t \t \t var removeBtnDiv = $(document.createElement('div')) 
 
\t \t \t \t \t \t \t \t \t .attr("class", 'col-md-1 removeBtn'); 
 

 
\t \t \t \t \t \t \t labelTwoDiv.appendTo(formGroupRowDiv).html(
 
\t \t \t \t \t \t \t \t \t '<label>Label 2</label>'); 
 

 
\t \t \t \t \t \t \t removeBtnDiv 
 
\t \t \t \t \t \t \t \t \t .appendTo(formGroupRowDiv) 
 
\t \t \t \t \t \t \t \t \t .html('<button class="btn btn-danger btn-xs removeDate">' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '<span class="glyphicon glyphicon-remove"></span>' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t + '</button>'); 
 

 
\t \t \t \t \t \t \t $(formGroupRowDiv).appendTo('.container'); 
 

 
\t \t \t \t \t \t \t $(".removeBtn").click(function(e) { 
 
\t \t \t \t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t \t \t \t $(".labels").closest().remove(); 
 

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

答

试试这个：

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

你既然是动态生成的div，你不能只是处理程序绑定到出现在负载的div。你需要将其绑定到一些上涨（如身体）

e.target这里是removeBtn
.parent()将返回父的jQuery对象
.siblings()将返回所有的它[父]兄弟姐妹
.find()将过滤到传递的选择器
.remove()将从DOM中删除它

答

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

你不想删除所有页面（您想删除特定.labels元素是最接近上存在任何.labels元素的closest()元素您刚刚点击的当前.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" 
 
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script 
 
\t 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> 
 
\t <div class="container"> 
 
\t \t <div class="form-group row"> 
 
\t \t \t <div class="col-md-2 labels"> 
 
\t \t \t \t <label>Label 1 </label> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-1" style="padding-bottom: 5px"> 
 
\t \t \t \t <button class="btn btn-danger btn-xs removeBtn"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-remove"></span> 
 
\t \t \t \t </button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

我试图去除十字键以及byadding \t \t \t \t \t \t \t \t \t \t \t $（本）.prev（ 'removeBtn '）。remove（）方法的，如果条件和 $（本）.parent（）。上一页（'。removeBtn'）。remove（）方法来否则，如果条件，但它不是删除。 – user2313232

在你的问题中，你说过你想删除'.labels'元素，现在在你正在谈论的'.removeBtn'元素的评论中。你应该决定你想要哪一个。 – Dekel

对不起。它应该是标签和按钮。我将编辑我的问题。 – user2313232

当按钮被点击时删除标签和按钮

相关推荐