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

2017/07/29
  • JavaScript
選択した行のHTMLをモーダルで削除確認して削除する方法

選択した行の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>

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

css

.modal{
  display: none;
}