選択した行のHTMLをモーダルで削除確認して削除する方法

フロントエンド | 2017.07.29

選択した行のHTMLを削除確認して削除する方法を今回はご説明したいと思います。

実装方法

HTML

<ul class="list">
  <li><span class="delete">削除1</span></li>
  <li><span class="delete">削除2</span></li>
  <li><span class="delete">削除3</span></li>
  <li><span class="delete">削除4</span></li>
</ul>

</ul>

JavaScript(jQuery)

$(document).ready(function(){
  $('.list .delete').on('click',function(){
    $('.list li').removeClass('target');
    $(this).closest('li').addClass('target');
    $('.modal').show();
  });
  $('.modal #yes').on('click',function(){
    $('.list li.target').remove();
    $('.modal').hide();
  });
  $('.modal #no').on('click',function(){
    $('.modal').hide();
  });
});

$(document).ready(function(){

$('.list .delete').on('click',function(){

$('.list li').removeClass('target');

$(this).closest('li').addClass('target');

$('.modal').show();

});

$('.modal #yes').on('click',function(){

$('.list li.target').remove();

$('.modal').hide();

});

$('.modal #no').on('click',function(){

$('.modal').hide();

});

css

.modal{
  display: none;
}

.modal{

display: none;

}