Удаление родительского div'a

338

15 декабря 2016, 16:28

Сегодня я уже спрашивала как добавлять новый div по нажатию кнопки, а теперь мне нужно удалять строку, и у меня снова ничего не выходит.

По нажатию кнопки у меня появляется div с элементами формы и кнопкой "remove". По нажатию на нее div должен удаляться, а также должно появляться уведомление о том, что div успешно удален. Как это можно сделать?

Я пробовала делать .remove(), но видимо неправильно его использую и у меня ничего не происходит.

// Добавление DIVа 
 
$(document).ready(function() { 
    $('.panel-body .btn').on('click', function() { 
        var jElement = $('<div class="program"><form><input class="hours" type="text" value=""><input class="mins" type="text" value=""><button type="button" class="deleteprogram"><span class="glyphicon glyphicon-remove "></span></button></form></div>'); 
 
        $(this).closest('.panel-body').append(jElement); 
        jElement.find(".hours").TouchSpin({ 
            min: 00, 
            max: 23, 
            step: 1, 
            verticalbuttons: true, 
            verticalupclass: 'glyphicon glyphicon-triangle-top', 
            verticaldownclass: 'glyphicon glyphicon-triangle-bottom' 
        }); 
        jElement.find(".mins").TouchSpin({ 
            min: 00, 
            max: 59, 
            step: 1, 
            verticalbuttons: true, 
            verticalupclass: 'glyphicon glyphicon-triangle-top', 
            verticaldownclass: 'glyphicon glyphicon-triangle-bottom' 
        }); 
    }); 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="bower_components/bootstrap-touchspin/src/jquery.bootstrap-touchspin.css" type="text/css" /> 
<script type="text/javascript" src="bower_components/bootstrap-touchspin/src/jquery.bootstrap-touchspin.js"></script> 
 
<div class="week panel-group" id="accordion"> 
  <div class="panel panel-default weekday"> 
    <div class="panel-heading"> 
      <div class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
                                Понедельник 
                            </a> 
      </div> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
      <div id="panel-body" class="panel-body"> 
        <button type="submit" class="btn btn-primary"> 
          <span class="glyphicon glyphicon-plus"></span><span>Добавить передачу</span> 
        </button> 
      </div> 
    </div> 
  </div> 
  <div class="panel panel-default weekday"> 
    <div class="panel-heading"> 
      <div class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
                                Вторник 
                            </a> 
      </div> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse in"> 
      <div id="panel-body" class="panel-body"> 
 
        <button type="submit" class="btn btn-primary"> 
          <span class="glyphicon glyphicon-plus"></span><span>Добавить передачу</span> 
        </button> 
      </div> 
    </div> 
  </div> 
  <div class="panel panel-default weekday"> 
    <div class="panel-heading"> 
      <div class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
                                Среда 
                            </a> 
      </div> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse in"> 
      <div id="panel-body" class="panel-body"> 
 
        <button type="submit" class="btn btn-primary"> 
          <span class="glyphicon glyphicon-plus"></span><span>Добавить передачу</span> 
        </button> 
      </div> 
    </div> 
  </div> 
  <div class="panel panel-default weekday"> 
    <div class="panel-heading"> 
      <div class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 
                                Четверг 
                            </a> 
      </div> 
    </div> 
    <div id="collapseFour" class="panel-collapse collapse in"> 
      <div id="panel-body" class="panel-body"> 
 
        <button type="submit" class="btn btn-primary"> 
          <span class="glyphicon glyphicon-plus"></span><span>Добавить передачу</span> 
        </button> 
      </div> 
    </div> 
  </div> 
  <div class="panel panel-default weekday"> 
    <div class="panel-heading"> 
      <div class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive"> 
                                Пятница 
                            </a> 
      </div> 
    </div> 
    <div id="collapseFive" class="panel-collapse collapse in"> 
      <div id="panel-body" class="panel-body"> 
 
        <button type="submit" class="btn btn-primary"> 
          <span class="glyphicon glyphicon-plus"></span><span>Добавить передачу</span> 
        </button> 
      </div> 
    </div> 
  </div> 
  <div class="panel panel-default weekday"> 
    <div class="panel-heading"> 
      <div class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSix"> 
                                Суббота 
                            </a> 
      </div> 
    </div> 
    <div id="collapseSix" class="panel-collapse collapse in"> 
      <div id="panel-body" class="panel-body"> 
 
        <button type="submit" class="btn btn-primary"> 
          <span class="glyphicon glyphicon-plus"></span><span>Добавить передачу</span> 
        </button> 
      </div> 
    </div> 
  </div> 
  <div class="panel panel-default weekday"> 
    <div class="panel-heading"> 
      <div class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven"> 
                                Воскресенье 
                            </a> 
      </div> 
    </div> 
    <div id="collapseSeven" class="panel-collapse collapse in"> 
      <div id="panel-body" class="panel-body"> 
 
        <button type="submit" class="btn btn-primary"> 
          <span class="glyphicon glyphicon-plus"></span><span>Добавить передачу</span> 
        </button> 
      </div> 
    </div> 
  </div> 
</div>

Answer 1

Можно добавить обработчик события click для .deleteprogram и в нём удалять всю строку .program. Так как .deleteprogram добавляются динамически, нужно использовать delegated event handler.

Итоговое добавление в код (внутри document.ready):

$('#accordion').on('click', '.deleteprogram', function() {
    $(this).closest('.program').remove();
});

Полный пример в fiddle.

Если нужно уведомление об удалении, можно добавить alert('Успешно удалено'); после $(this).closest('.program').remove();. Либо же использовать какое-либо "красивое" уведомление.