单击按钮时删除标签和按钮
[英]remove label and button when button clicked
问题描述
为了学习，我使用html，javascript和jquery制作了两个标签（Label1和Label 2，每个标签有两个删除按钮）。
现在，我希望单击十字按钮时可以删除标签和按钮。
我试过了
$(".labels").closest().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> <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>
2 个解决方案
解决方案1
0 2016-12-31 00:33:24
尝试这个：
$("body").click(".removeBtn", function(e) {
$(e.target).parent().parent().siblings().find("label").remove()
});
由于您是动态生成div，因此不能仅将处理程序绑定到加载时出现的div。 您需要将其绑定到更高的物体上（例如身体）
-
e.target这里是removeBtn -
.parent()将返回父对象的jQuery对象 -
.siblings()将返回所有[父级]兄弟姐妹 -
.find()将过滤到传递的选择器 -
.remove()会将其从DOM中删除
解决方案2
0 2016-12-31 00:45:56
基本上，您在这里有4个问题：
- 您不想删除页面上存在的任何
.labels元素中的所有.labelsclosest()元素（您希望删除与刚刚单击的当前.removeBtn最接近的特定.labels元素。 -
closest的不是您要查找的，实际上是prev元素。 - 由于您拥有的两个
.removeBtn元素的HTML结构不同，因此您将需要两个不同的选择器。
第一个选择器将是$(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>
单击时如何删除按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.