удалите ярлык и кнопку при нажатии кнопки

Я создал две метки (Label1 и Label 2 и две кнопки удаления для каждой метки), используя html, javascript и jquery для моих учебных целей.удалите ярлык и кнопку при нажатии кнопки

Теперь я хочу, чтобы метка и кнопка были удалены при нажатии на крест-кнопку.

Я попытался

$(".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() 
});

Поскольку вы динамически генерируя дивы, вы не можете просто связать обработчик дивы, которые появляются при загрузке. Вы должны привязать его к чему-то выше (как тела)

e.target здесь является removeBtn
.parent() возвращает объект JQuery родителя
.siblings() будет возвращать все это братья и сестры [родителя]
.find() будет фильтровать пройденному селектор
.remove() будет удалить его из DOM

источник

2016-12-31 00:33:24

В основном у вас было 4 проблемы здесь:

Вы не хотите, чтобы удалить все closest() элементов любого .labels элемента, который существует на странице (вы хотите удалить конкретный .labels элемент, который является самым близким к текущий .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 '). Удалить() к, если условие и $ (это) .parent(). Пред ('. RemoveBtn'). Удалить() для иначе если условие, но оно не удаляется. – user2313232

В вашем вопросе вы сказали, что хотите удалить элемент '.labels', а теперь в комментарии вы говорите об элементе' .removeBtn'. Вы должны решить, какой из них вы хотите. – Dekel

извините. это должны быть как ярлыки, так и кнопки. Я отредактирую свой вопрос. – user2313232

удалите ярлык и кнопку при нажатии кнопки

ответ

Смежные вопросы