How can I delete an entire item when I click on the "Delete" button? These items can be unlimited.

 <div class="item"> <div class="right floated content"> <a class="ui red basic button del-bookmark" data-bk="{{ book.id }}" data-pg="{{bookmark.page_id}}">Удалить</a> </div> <i class="book icon bookmark-link"></i> <div class="content bookmark-link"> <a href="../book/{{book.id}}?page={{bookmark.page_id}}">Страница {{bookmark.page_id}}</a> </div> </div>
  • And what is this template engine? Not angular? - vp_arth
  • @vp_arth django - Roman Kravets

3 answers 3

 $(".del-bookmark").click(function(){ $(this).closest(".item").remove(); return false; });

    Well, even before the heap:

    template:

     <div class="item" id="item_{{book.id}}_{{bookmark.page_id}}"> <div class="right floated content"> <a class="ui red basic button del-bookmark" data-bk="{{ book.id }}" data-pg="{{bookmark.page_id}}">Удалить</a> </div> <i class="book icon bookmark-link"></i> <div class="content bookmark-link"> <a href="../book/{{book.id}}?page={{bookmark.page_id}}">Страница {{bookmark.page_id}}</a> </div>

    js:

     $(".del-bookmark").click(function(){ $('#item_'+$(this).data('bk')+'_'+$(this).data('pg')).remove(); return false; });

      Another option:

       $(".del-bookmark").click(function (e) { removeEl(e.target); return false; }); function removeEl(el) { $(el).parent().parent().remove(); }; 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item"> <div class="right floated content"> <a class="ui red basic button del-bookmark" data-bk="{{ book.id }}" data-pg="{{bookmark.page_id}}">Удалить</a> </div> <i class="book icon bookmark-link"></i> <div class="content bookmark-link"> <a href="../book/{{book.id}}?page={{bookmark.page_id}}">Страница {{bookmark.page_id}}</a> </div> </div>