當按鈕被點擊時刪除標籤和按鈕

我已經爲我的學習目的使用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>

來源

2016-12-31 user2313232

試試這個：

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

你既然是動態生成的div，你不能只是處理程序綁定到出現在負載的div。你需要將其綁定到一些上漲（如身體）

e.target這裏是removeBtn
.parent()將返回父的jQuery對象
.siblings()將返回所有的它[父]兄弟姐妹
.find()將過濾到傳遞的選擇器
.remove()將從DOM中刪除它

來源

2016-12-31 00:33:24

基本上你有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>

來源

2016-12-31 00:45:56 Dekel

我試圖去除十字鍵以及byadding \t \t \t \t \t \t \t \t \t \t \t $（本）.prev（ 'removeBtn '）。remove（）方法的，如果條件和 $（本）.parent（）。上一頁（'。removeBtn'）。remove（）方法來否則，如果條件，但它不是刪除。 – user2313232

在你的問題中，你說過你想刪除'.labels'元素，現在在你正在談論的'.removeBtn'元素的評論中。你應該決定你想要哪一個。 – Dekel

對不起。它應該是標籤和按鈕。我將編輯我的問題。 – user2313232

當按鈕被點擊時刪除標籤和按鈕

回答

相關問題