單擊確認按鈕時刪除卡

Question

請訪問頁面查看詳細問題https://ibnul.neocities.org/_temporary/au2pr11/au2pr11.html

我這里有 3 張卡。 他們每個人都有一個刪除按鈕。 單擊它會觸發覆蓋對話框以取消或確認。 如果我單擊取消，它應該會消失，而我自己可以做到。 但是如果我點擊確認按鈕，它應該消失並刪除刪除按鈕觸發覆蓋對話框的卡片。

但是覆蓋對話框是一個用於所有卡片的對話框。 而且所有的卡片都有相同的類名，我也想保持這種狀態，因為我想多次復制粘貼，所以我不想給不同的類或 ID 名稱並為每個卡片編寫不同的功能。 如何檢測單擊刪除圖標的元素，然后如果用戶單擊確認按鈕，整個卡片應該消失？ 我想通過在 res-card-outer 元素上添加一個名為 hide-res-card-outer 的類名來移除卡片。

請用純 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

根據您的評論，我決定完全重新開始我的回答。 這可能不是最好的方法。 這是你自己看的小提琴。

我們做的第一件事是創建一個全局對象來存儲我們的事件，以便我們可以在任何地方訪問它們。 這是必要的，因此我們可以存儲單擊了哪個刪除按鈕。

var Event = {};

接下來，我們從 show 函數中捕獲事件並將其存儲在對象中。

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

現在在我們的 remove 函數中，我們確切地知道事件來自哪個元素，以便我們可以遍歷到正確的卡片。

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

然后我們在取消函數中刪除現有的事件偵聽器，以防止任何其他卡片被隱藏。

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

Answer 2

我認為最好的做法是使用 id。

但別擔心，如果您不喜歡使用 id，您可以通過在卡片的刪除按鈕上添加類似“toBeRemoved”的類來標記點擊了哪張卡片。

您可以通過傳遞按鈕元素作為參數在 showDeleteConfBox 函數中進行此標記。

然后，如果用戶確認移除，則找到距離標記按鈕最近的卡片並移除卡片。

然后，在任一情況下（取消或確認），隱藏確認框並清除“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 -->