ボタンをクリックしたときにラベルとボタンを削除する

私は学習目的でhtml、javascript、およびjqueryを使用して2つのラベル（Label1とLabel2と2つのラベルごとに2つの削除ボタン）を作成しました。ボタンをクリックしたときにラベルとボタンを削除する

ここで、十字ボタンをクリックすると、ラベルとボタンを削除します。

私は

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

を試みたが、それは動作しません。

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

あなたが動的にdivを生成しているので、あなただけの負荷に表示されるdiv要素にハンドラをバインドカント：

<!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

はこれを試してみてください助けてください。あなたは、より高いアップ（体のような）何かここ

e.target
がある
.siblings()はそれ[親の]兄弟のすべてを返します。親のjQueryオブジェクトを返しますremoveBtn
.parent()にバインドする必要がありますDOM

からそれを除去する

.find()が経過セレクタ

.remove()にフィルタリングされます

出典

2016-12-31 00:33:24

基本的には、ここ4つの問題だった：あなたは（あなたがに最も近い特定.labelsの要素を削除したいページ上に存在する任意の.labels要素のすべてのclosest()の要素を削除したくない

を現在表示されている.removeBtnです。
closestはあなたが探しているものではありませんが、実際にはprev要素です。
HTMLの構造が2つの異なるセレクタを必要とする2つの.removeBtn要素の間で異なります。

最初のセレクタは$(this).prev('.labels')になり、2番目のセレクタは$(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

私は\tをbyaddingにも十字ボタンを削除しようとしました\t \t \t \t \t \t \t \t \t \t $（この）.prev（ 'removeBtn '）。（削除）場合の条件と $（この）.parent（）。前のページ（'。removeBtn'）へ。（削除）しますそれ以外の場合は条件を削除していません。 – user2313232

あなたの質問では、あなたは '.labels'要素を削除したいと言っています。そして今あなたがコメントしている' .removeBtn'要素について言います。あなたはそれらのどれをあなたが望むかを決めるべきです。 – Dekel

申し訳ありません。ラベルとボタンの両方にする必要があります。私は私の質問を編集します。 – user2313232

ボタンをクリックしたときにラベルとボタンを削除する

答えて

関連する問題