There is a list of divs when you hover on which a delete button appears when you click on it and a modal window appears asking you to confirm the deletion. If the user confirms the deletion, then that div should be deleted in which this modal window was called, please tell me how it can be done approximate scheme

Closed due to the fact that the essence of the question is incomprehensible by the participants Stepan Kasyanenko , humster_spb , 0xdb , Air , iluxa1810 14 Dec '18 at 5:48 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    show your code - humster_spb
  • one
    Well, let's go empirically, what have you tried to do and what is not working out for you? - Nilsan
  • The modal window is implemented with the help of bootstrap 3 I do not understand how to say on the button in the modal window that the div in which the modal window itself was called is to be deleted - Slava Nikitina

3 answers 3

$(".del_div button").on("click", function() { $(".modal").show() divs_id = $(this).closest(".del_div").attr('id') }) $(".modal button").on("click", function() { $("#" + divs_id).remove() $(".modal").hide() }) 
 .del_div { border: 1px solid; } .modal { display: none; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="del_div" id="1"> <p>text 1</p> <button>удалить</button> </div> <div class="del_div" id="2"> <p>text 2</p> <button>удалить</button> </div> <div class="del_div" id="3"> <p>text 3</p> <button>удалить</button> </div> <div class="del_div" id="4"> <p>text 4</p> <button>удалить</button> </div> <div class="modal"> <p>Точно удалить?</p> <button>да</button> </div>

Any such option ¯_ (ツ) _ / ¯

     document.querySelectorAll ('div').forEach (div => div.querySelector ('button').addEventListener ('click', ev => confirm ('Are you sure?') && div.parentNode.removeChild (div))) 
     <div>1<button>Delete</button></div> <div>2<button>Delete</button></div> <div>3<button>Delete</button></div>

      For example:

       <div> <div onClick="confirmDelete(this)">Первый</div> <div onClick="confirmDelete(this)">Второй</div> <div onClick="confirmDelete(this)">Третий</div> </div> <script> function confirmDelete(item) { // показываем модалку // да, удалить! item.remove(); } </script>