我已经为我的学习目的使用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>
我试图去除十字键以及byadding \t \t \t \t \t \t \t \t \t \t \t $(本).prev( 'removeBtn ')。remove()方法的,如果条件和 $(本).parent()。上一页('。removeBtn')。remove()方法来否则,如果条件,但它不是删除。 – user2313232
在你的问题中,你说过你想删除'.labels'元素,现在在你正在谈论的'.removeBtn'元素的评论中。你应该决定你想要哪一个。 – Dekel
对不起。它应该是标签和按钮。我将编辑我的问题。 – user2313232