javascript - 单击确认按钮后移除卡

标签 javascript html css

请访问页面查看问题详情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 -->

最佳答案

我认为最好的做法是使用 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 -->

关于javascript - 单击确认按钮后移除卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59776630/

上一篇：javascript - 在 javascript 中构建一个自迭代表？

下一篇：javascript - HTML 表单提交(POST req)到服务器应返回动态 HTML

相关文章：

javascript - Expressjs 服务器地址主机不返回任何内容

javascript - 如何比较两个 CSS 选择器？

javascript - 表单提交时出现 jquery 错误

html - 当我将菜单更改为显示 :inline 时，li 元素相互重叠

css - 更改 native 文本项的字体​​？

javascript - ES6类中成员变量的声明

javascript - 防止错误 : getaddrinfo ENOTFOUND at GetAddrInfoReqWrap. onlookup 后应用程序崩溃

html - mailto 链接无法使用 Bootstrap

javascript - 在 html 中为调查分配数值

javascript - 如何在网络技术上制作表格翻转(如卡片翻转效果)

©2024 IT工具网  联系我们