Remove card when clicked on confirm button

Question

Please visit the page to see the problem in details https://ibnul.neocities.org/_temporary/au2pr11/au2pr11.html

Here I have 3 cards. Every one of them has a delete button. When clicked it triggers an overlay dialog to cancel or confirm. If I click the cancel it should go away which I have been able to do myself. But If I click the confirm button it should go away and also remove the card which delete button triggered the overlay dialog.

But the overlay dialog is a single one used for all the cards. And also all the cards has the same class name and I also want to keep it that way cause I want to copy paste this multiple time so I don't want to give different class or id name and write different function for each one. How do I detect the element on which the delete icon was clicked and then if user click the confirm button the whole card should disappear? And I want to remove the card by adding a class name called hide-res-card-outer on the res-card-outer element.

Please show it in pure JavaScript.

 var delete_menu_btns = document.querySelectorAll('.del-menu-icon-image'); var del_conf_overlay_box = document.querySelector('.del-conf-overl-outer'); var del_conf_cancel_btn = document.querySelector('.del-conf-cancel-btn'); var del_conf_confirm_btn = document.querySelector('.del-conf-confirm-btn'); delete_menu_btns.forEach(btn => { btn.addEventListener('click', showDeleteConfBox); }); function showDeleteConfBox() { del_conf_overlay_box.classList.add('show-del-conf-overl-box'); } del_conf_cancel_btn.addEventListener('click', removeDeleteconfBox); del_conf_confirm_btn.addEventListener('click', removeDeleteconfBox); function removeDeleteconfBox() { del_conf_overlay_box.classList.remove('show-del-conf-overl-box'); }

 * { margin: 0px; font-family: 'Segoe UI', sans-serif; } body { background-color: rgb(240, 240, 240); } .res-card-cont { padding: 20px 100px; } .res-card-outer { background-color: #fdfdfd; padding: 10px 10px 10px 10px; margin: 15px 0px 15px 0px; } .res-card-top-imginfo-box { display: flex; } .res-card-image { width: 230px; height: 145px; } .res-card-info-box { flex-grow: 2; padding: 5px 10px 5px 20px; } .res-card-title-price-cont { display: flex; flex-wrap: wrap; justify-content: space-between; } .res-card-title-text { font-size: 18px; color: rgb(107, 107, 107); padding: 2px 5px 4px 0px; white-space: nowrap; } .res-card-title-text:hover { color: green; } .res-card-price-text { font-size: 18px; white-space: nowrap; color: rgb(107, 107, 107); padding: 2px 0px 4px 0px; } .res-card-det-text { font-size: 14px; color: #8d8d8d; padding: 6px 0px 6px 0px; } .res-card-det-text > span { padding: 0px 8px 0px 0px; } .res-loc-shre-con { display: flex; justify-content: space-between; padding: 4px 0px 5px 0px; } .res-loc-leftsd-con { display: flex; } .res-location-ico { width: 17px; height: 17px; cursor: pointer; padding: 1px 7px 0px 3px; opacity: 0.7; } .res-location-ico:hover { opacity: 0.9; } .res-location-text { font-size: 14px; color: #8d8d8d; padding: 2px 5px 0px 5px; } .res-share-ico-box { display: flex; padding: 2px 5px 2px 15px; } .res-share-ico-link { margin: 0px 3px 0px 3px; } .res-share-icon { width: 14px; height: 14px; opacity: 0.6; } .res-share-icon:hover { opacity: 0.8; } .del-menu-icon-con { position: relative; margin: -2px 0px -2px 0px; } .del-menu-text-icon-con { display: flex; align-items: center; opacity: 0.8; } .del-menu-text-icon-con:hover { opacity: 1; } .del-menu-icon-image { cursor: pointer; width: 22px; height: 18px; padding: 2px 2px 2px 2px; } .del-conf-overl-outer { position: fixed; z-index: 100; top: 0px; left: 0px; width: 100vw; height: 100vh; display: none; } .del-conf-overl-inner { height: 100%; padding: 10px 15px 10px 15px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.692); } .del-conf-overl-box { padding: 10px 20px 20px 20px; width: 350px; background-color: white; } .del-conf-text1 { font-size: 22px; padding: 10px 0px 10px 0px; } .del-conf-text2 { font-size: 15px; padding: 5px 0px 10px 0px; } .del-conf-btns-con { display: flex; justify-content: flex-end; padding: 20px 0px 5px 0px; } .del-conf-cancel-btn { border: none; padding: 5px 18px; font-size: 14px; background-color: #90b974; color: #ffffff; } .del-conf-cancel-btn:hover { background-color: #79b84f; } .del-conf-confirm-btn { border: none; padding: 5px 18px; margin: 0px 0px 0px 10px; font-size: 14px; background-color: #f34c46; color: #ffffff; } .del-conf-confirm-btn:hover { background-color: #f8170f; } .show-del-conf-overl-box { display: block; } .hide-res-card-outer { display: none; }

 <!-- result card box start --> <div class='bdy-adv-res-cont-inner'> <div class='res-card-cont'> <div class='res-card-outer'> <div class='res-card-top-imginfo-box'> <img class='res-card-image' src='car1.webp' alt=''> <div class='res-card-info-box'> <div class='res-card-title-price-cont'> <a class='res-card-title-text' href=''>Lamborghini Veneno</a> <p class='res-card-price-text'>200000 €</p> </div> <p class='res-card-det-text'> <span class=''>FR 2/2019</span> <span class=''>Disel</span> <span class=''>4895 km</span> <span class=''>1895ps</span> <span class=''>HU 4/2001</span> </p> <p class='res-card-det-text'> <span class=''>Semi-automatic</span> <span class=''>Disel</span> <span class=''>80mg</span> <span class=''>7,51</span> </p> <p class='res-card-det-text'> <span class=''>Private</span> <span class='res-dettext-hid'>au2mobile</span> </p> <div class='res-loc-shre-con'> <div class='res-loc-leftsd-con'> <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'> <p class='res-location-text'>2948 Resoif Voufo</p> </div> <div class='del-menu-icon-con'> <div class='del-menu-text-icon-con'> <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'> </div> </div> </div> </div> </div> </div> <div class='res-card-outer'> <div class='res-card-top-imginfo-box'> <img class='res-card-image' src='car4.webp' alt=''> <div class='res-card-info-box'> <div class='res-card-title-price-cont'> <a class='res-card-title-text' href=''>Ferrari 2018</a> <p class='res-card-price-text'>7895.3 €</p> </div> <p class='res-card-det-text'> <span class=''>FR 2/2019</span> <span class=''>Disel</span> <span class=''>95 km</span> <span class=''>60ps</span> <span class=''>HU 4/2001</span> </p> <p class='res-card-det-text'> <span class=''>Semi-automatic</span> <span class=''>Petrol</span> <span class=''>80mg</span> <span class=''>7,51</span> </p> <p class='res-card-det-text'> <span class=''>Private</span> <span class='res-dettext-hid'>au2mobile</span> </p> <div class='res-loc-shre-con'> <div class='res-loc-leftsd-con'> <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'> <p class='res-location-text'>2948 Resoif Voufo</p> </div> <div class='del-menu-icon-con'> <div class='del-menu-text-icon-con'> <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'> </div> </div> </div> </div> </div> </div> <div class='res-card-outer'> <div class='res-card-top-imginfo-box'> <img class='res-card-image' src='car5.webp' alt=''> <div class='res-card-info-box'> <div class='res-card-title-price-cont'> <a class='res-card-title-text' href=''>Nissan 2019</a> <p class='res-card-price-text'>2569.2 €</p> </div> <p class='res-card-det-text'> <span class=''>FR 2/2019</span> <span class=''>Disel</span> <span class=''>200 km</span> <span class=''>1895ps</span> <span class=''>HU 4/2001</span> </p> <p class='res-card-det-text'> <span class=''>Gearbox</span> <span class=''>Disel</span> <span class=''>80mg</span> <span class=''>7,51</span> </p> <p class='res-card-det-text'> <span class=''>Private</span> <span class='res-dettext-hid'>au2mobile</span> </p> <div class='res-loc-shre-con'> <div class='res-loc-leftsd-con'> <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'> <p class='res-location-text'>2948 Resoif Voufo</p> </div> <div class='del-menu-icon-con'> <div class='del-menu-text-icon-con'> <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'> </div> </div> </div> </div> </div> </div> </div> </div> <!-- result card box end --> <!-- delete confirm overlay start --> <div class='del-conf-overl-outer'> <div class='del-conf-overl-inner'> <div class='del-conf-overl-box'> <p class='del-conf-text1'>Confirm!</p> <p class='del-conf-text2'>Are you sure you want to delete your favourites!</p> <div class='del-conf-btns-con'> <button class='del-conf-cancel-btn' type='button'>Cancel</button> <button class='del-conf-confirm-btn' type='button'>Confirm</button> </div> </div> </div> </div> <!-- delete confirm overlay end -->

Answer 1

Based on your comment, I decided to completely start over with my answer. This may not be the best way. Here is a fiddle to see for yourself.

The first thing we do, is create a global object to store our events so we can access them anywhere. This is necessary so we can store which delete button was clicked.

var Event = {};

Next, we capture the event from our show function and store it in the object.

function showDeleteConfBox(event) {
    Event.remove = event;
    del_conf_overlay_box.classList.add('show-del-conf-overl-box');
}

Now inside our remove function, we know exactly which element the event came from so we can traverse to the correct card.

function removeDeleteconfBox() {
    del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
    Event.remove.target.closest('.res-card-outer').classList.add('hide-res-card-outer');
}

We then remove the existing event listener in our cancel function to prevent any of the other cards from being hidden.

function cancelDeleteconfBox() {
    del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
    del_conf_confirm_btn.removeEventListener("click", function() {
        removeDeleteconfBox();
    });
}

Answer 2

I think best practice is to use id's.

But don't worry, if you don't prefer to use id's you can label which card is clicked by adding a class like "toBeRemoved" on the delete button of the card.

You can do this labeling in showDeleteConfBox function by passing button element as parameter.

Then if user confirms removal, find the closest card of labeled button and remove the card.

Then, in either cases (Cancel or Confirm), hide confirmation box and clear the classes "toBeRemoved".

 // These two functions is to find the closest parent of a selector function collectionHas(a, b) { //helper function (see below) for(var i = 0, len = a.length; i < len; i ++) { if(a[i] == b) return true; } return false; } function findParentBySelector(elm, selector) { var all = document.querySelectorAll(selector); var cur = elm.parentNode; while(cur && !collectionHas(all, cur)) { //keep going up until you find a match cur = cur.parentNode; //go up } return cur; //will return null if not found } var delete_menu_btns = document.querySelectorAll('.del-menu-icon-image'); var del_conf_overlay_box = document.querySelector('.del-conf-overl-outer'); var del_conf_cancel_btn = document.querySelector('.del-conf-cancel-btn'); var del_conf_confirm_btn = document.querySelector('.del-conf-confirm-btn'); delete_menu_btns.forEach(btn => { btn.addEventListener('click', function(){ showDeleteConfBox(btn); }); }); function showDeleteConfBox(btn) { del_conf_overlay_box.classList.add('show-del-conf-overl-box'); btn.classList.add('toBeRemoved'); } del_conf_cancel_btn.addEventListener('click', cancelDeleteconfBox); del_conf_confirm_btn.addEventListener('click', removeDeleteconfBox); function cancelDeleteconfBox() { del_conf_overlay_box.classList.remove('show-del-conf-overl-box'); clearBtnClasses(); } function removeDeleteconfBox() { var btnToBeRemoved = document.querySelector('.toBeRemoved'); var cartToBeRemoved = findParentBySelector(btnToBeRemoved, '.res-card-outer'); cartToBeRemoved.classList.add('hide-res-card-outer'); del_conf_overlay_box.classList.remove('show-del-conf-overl-box'); clearBtnClasses(); } function clearBtnClasses() { delete_menu_btns.forEach(btn => { btn.classList.remove('toBeRemoved'); }); }

 * { margin: 0px; font-family: 'Segoe UI', sans-serif; } body { background-color: rgb(240, 240, 240); } .res-card-cont { padding: 20px 100px; } .res-card-outer { background-color: #fdfdfd; padding: 10px 10px 10px 10px; margin: 15px 0px 15px 0px; } .res-card-top-imginfo-box { display: flex; } .res-card-image { width: 230px; height: 145px; } .res-card-info-box { flex-grow: 2; padding: 5px 10px 5px 20px; } .res-card-title-price-cont { display: flex; flex-wrap: wrap; justify-content: space-between; } .res-card-title-text { font-size: 18px; color: rgb(107, 107, 107); padding: 2px 5px 4px 0px; white-space: nowrap; } .res-card-title-text:hover { color: green; } .res-card-price-text { font-size: 18px; white-space: nowrap; color: rgb(107, 107, 107); padding: 2px 0px 4px 0px; } .res-card-det-text { font-size: 14px; color: #8d8d8d; padding: 6px 0px 6px 0px; } .res-card-det-text > span { padding: 0px 8px 0px 0px; } .res-loc-shre-con { display: flex; justify-content: space-between; padding: 4px 0px 5px 0px; } .res-loc-leftsd-con { display: flex; } .res-location-ico { width: 17px; height: 17px; cursor: pointer; padding: 1px 7px 0px 3px; opacity: 0.7; } .res-location-ico:hover { opacity: 0.9; } .res-location-text { font-size: 14px; color: #8d8d8d; padding: 2px 5px 0px 5px; } .res-share-ico-box { display: flex; padding: 2px 5px 2px 15px; } .res-share-ico-link { margin: 0px 3px 0px 3px; } .res-share-icon { width: 14px; height: 14px; opacity: 0.6; } .res-share-icon:hover { opacity: 0.8; } .del-menu-icon-con { position: relative; margin: -2px 0px -2px 0px; } .del-menu-text-icon-con { display: flex; align-items: center; opacity: 0.8; } .del-menu-text-icon-con:hover { opacity: 1; } .del-menu-icon-image { cursor: pointer; width: 22px; height: 18px; padding: 2px 2px 2px 2px; } .del-conf-overl-outer { position: fixed; z-index: 100; top: 0px; left: 0px; width: 100vw; height: 100vh; display: none; } .del-conf-overl-inner { height: 100%; padding: 10px 15px 10px 15px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.692); } .del-conf-overl-box { padding: 10px 20px 20px 20px; width: 350px; background-color: white; } .del-conf-text1 { font-size: 22px; padding: 10px 0px 10px 0px; } .del-conf-text2 { font-size: 15px; padding: 5px 0px 10px 0px; } .del-conf-btns-con { display: flex; justify-content: flex-end; padding: 20px 0px 5px 0px; } .del-conf-cancel-btn { border: none; padding: 5px 18px; font-size: 14px; background-color: #90b974; color: #ffffff; } .del-conf-cancel-btn:hover { background-color: #79b84f; } .del-conf-confirm-btn { border: none; padding: 5px 18px; margin: 0px 0px 0px 10px; font-size: 14px; background-color: #f34c46; color: #ffffff; } .del-conf-confirm-btn:hover { background-color: #f8170f; } .show-del-conf-overl-box { display: block; } .hide-res-card-outer { display: none; }

 <!-- result card box start --> <div class='bdy-adv-res-cont-inner'> <div class='res-card-cont'> <div class='res-card-outer'> <div class='res-card-top-imginfo-box'> <img class='res-card-image' src='car1.webp' alt=''> <div class='res-card-info-box'> <div class='res-card-title-price-cont'> <a class='res-card-title-text' href=''>Lamborghini Veneno</a> <p class='res-card-price-text'>200000 €</p> </div> <p class='res-card-det-text'> <span class=''>FR 2/2019</span> <span class=''>Disel</span> <span class=''>4895 km</span> <span class=''>1895ps</span> <span class=''>HU 4/2001</span> </p> <p class='res-card-det-text'> <span class=''>Semi-automatic</span> <span class=''>Disel</span> <span class=''>80mg</span> <span class=''>7,51</span> </p> <p class='res-card-det-text'> <span class=''>Private</span> <span class='res-dettext-hid'>au2mobile</span> </p> <div class='res-loc-shre-con'> <div class='res-loc-leftsd-con'> <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'> <p class='res-location-text'>2948 Resoif Voufo</p> </div> <div class='del-menu-icon-con'> <div class='del-menu-text-icon-con'> <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'> </div> </div> </div> </div> </div> </div> <div class='res-card-outer'> <div class='res-card-top-imginfo-box'> <img class='res-card-image' src='car4.webp' alt=''> <div class='res-card-info-box'> <div class='res-card-title-price-cont'> <a class='res-card-title-text' href=''>Ferrari 2018</a> <p class='res-card-price-text'>7895.3 €</p> </div> <p class='res-card-det-text'> <span class=''>FR 2/2019</span> <span class=''>Disel</span> <span class=''>95 km</span> <span class=''>60ps</span> <span class=''>HU 4/2001</span> </p> <p class='res-card-det-text'> <span class=''>Semi-automatic</span> <span class=''>Petrol</span> <span class=''>80mg</span> <span class=''>7,51</span> </p> <p class='res-card-det-text'> <span class=''>Private</span> <span class='res-dettext-hid'>au2mobile</span> </p> <div class='res-loc-shre-con'> <div class='res-loc-leftsd-con'> <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'> <p class='res-location-text'>2948 Resoif Voufo</p> </div> <div class='del-menu-icon-con'> <div class='del-menu-text-icon-con'> <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'> </div> </div> </div> </div> </div> </div> <div class='res-card-outer'> <div class='res-card-top-imginfo-box'> <img class='res-card-image' src='car5.webp' alt=''> <div class='res-card-info-box'> <div class='res-card-title-price-cont'> <a class='res-card-title-text' href=''>Nissan 2019</a> <p class='res-card-price-text'>2569.2 €</p> </div> <p class='res-card-det-text'> <span class=''>FR 2/2019</span> <span class=''>Disel</span> <span class=''>200 km</span> <span class=''>1895ps</span> <span class=''>HU 4/2001</span> </p> <p class='res-card-det-text'> <span class=''>Gearbox</span> <span class=''>Disel</span> <span class=''>80mg</span> <span class=''>7,51</span> </p> <p class='res-card-det-text'> <span class=''>Private</span> <span class='res-dettext-hid'>au2mobile</span> </p> <div class='res-loc-shre-con'> <div class='res-loc-leftsd-con'> <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'> <p class='res-location-text'>2948 Resoif Voufo</p> </div> <div class='del-menu-icon-con'> <div class='del-menu-text-icon-con'> <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'> </div> </div> </div> </div> </div> </div> </div> </div> <!-- result card box end --> <!-- delete confirm overlay start --> <div class='del-conf-overl-outer'> <div class='del-conf-overl-inner'> <div class='del-conf-overl-box'> <p class='del-conf-text1'>Confirm!</p> <p class='del-conf-text2'>Are you sure you want to delete your favourites!</p> <div class='del-conf-btns-con'> <button class='del-conf-cancel-btn' type='button'>Cancel</button> <button class='del-conf-confirm-btn' type='button'>Confirm</button> </div> </div> </div> </div> <!-- delete confirm overlay end -->