0

Есть такая начальная разметка:

    <div class="inputs">

        <div class="form-group row">
            <div class="col-md-11">
                <input class="form-control value" type="text" name="values[]" value="" placeholder="Укажите значение атрибута">
            </div>
            <div class="col-md-1">
                <div class="btn btn-danger destroy">X</div>
            </div>
        </div>

    </div>

<a class="btn btn-primary" id="add">Добавить значение</a>

Для наглядности:

введите сюда описание изображения

Новое поле и кнопка добавляются с помощью jquery по тыку на кнопку. Вот так:

    $(document).ready(function(){

        $('#add').click(function() {
            $('        <div class="form-group row">\n' +
                '            <div class="col-md-11">\n' +
                '                <input class="form-control value" type="text" name="values[]" value="" placeholder="Укажите значение атрибута">\n' +
                '            </div>\n' +
                '            <div class="col-md-1">\n' +
                '                <div class="btn btn-danger destroy">X</div>\n' +
                '            </div>\n' +
                '        </div>').fadeIn('slow').appendTo('.inputs');
        });

    });

Как оживить кнопку на удаление, чтобы она удаляла кусок той разметки, в которой она находится?

1
  • Можно пробовать this.parentNode.remove(); или $(this).parent().remove(); Commented 16 мая 2019 в 16:55

1 ответ 1

2

$(document).ready(function() {

  $('#add').click(function() {
    $('<div class="form-group row">\n' +
        '<div class="col-md-11">\n' +
          '<input class="form-control value" type="text" name="values[]" value="" placeholder="Укажите значение атрибута">\n' +
        '</div>\n' +
        '<div class="col-md-1">\n' +
          '<div class="btn btn-danger destroy">X</div>\n' +
        '</div>\n' +
      '</div>').fadeIn('slow').appendTo('.inputs');
  });
  
  $('.inputs').on('click', '.destroy', function() {
    $(this).parent().parent().remove();
  });

});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputs">

  <div class="form-group row">
    <div class="col-md-11">
      <input class="form-control value" type="text" name="values[]" value="" placeholder="Укажите значение атрибута">
    </div>
    <div class="col-md-1">
      <div class="btn btn-danger destroy">X</div>
    </div>
  </div>

</div>

<a class="btn btn-primary" id="add">Добавить значение</a>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.