多个 div 的 parentNode 的 EventListener答案

【问题标题】：EventListener for parentNode For Multiple Divs多个 div 的 parentNode 的 EventListener
【发布时间】：2021-09-12 19:37:48
【问题描述】：

我现在正在做我的项目，想在表上添加一些功能，即用户的删除按钮，然后弹出确认窗口以确保管理员想要从表中删除用户“是”和“否”按钮，如果我们单击“是”，则当“否”确认窗口消失时，用户将被删除。这是代码。我可以显示确认窗口，但无法将其关闭或使其再次消失。

有什么想法吗？

const deleteButton = document.querySelectorAll('.trashIcon');
const buttonYes = document.querySelectorAll('.buttonYes');
const buttonNo = document.querySelectorAll('.buttonNo');

function openWindow() {
  this.parentNode.querySelector('.confirmWindow').classList.remove('hidden');
  this.classList.add('hidden');
}

function closeDeleteWindow(e) {
    //this is where my problem is
e.currentTarget.querySelector('.confirmWindow').classList.add('hidden');

    this.classList.add('hidden');
}

for (let i=0; i < deleteButton.length; i++){
  deleteButton[i].addEventListener('click', openWindow);
}

for (let i=0; i < buttonNo.length; i++){
  buttonNo[i].addEventListener('click', closeDeleteWindow);
}

table {
    font-family: Nunito Sans;
    font-style: normal;
    font-weight: normal;
    width: 100%;
    align-items: flex-start;
    padding: 0px;
  }
  
  td, th {
    font-family: 'Nunito Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    font-size: 14px;
    line-height: 115%;
    letter-spacing:0.01em;
  }
  
  thead th{
    padding: 16px!important;
  }
  
  tr:nth-child(even) {
    background-color: #abb3c2;
  }
  
  .header{
    background-color: #05111A;
    color: white;
  }
  
  .table-row {
    height: 65px;
  }
  
  .table-download {
    font-family: 'Nunito Sans', sans-serif;
    text-decoration: none;
    color: #05111A;
  }
  
  .table-download i {
    margin-right: 3px;
  }

  .hidden {
    display: none;
  }

  .trashIcon {
    cursor: pointer;
    border: none;
    background-color: transparent;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="tabelle.css">
    <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet">
</head>
<body>
  <table class="table">
    <thead>
      <tr class="header">
        <th scope="col">UserID</th>
        <th scope="col">Name</th>
        <th scope="col">Email Address</th>
        <th scope="col">Standort</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row">
        <th scope="row">1</th>
        <td>Audrey Mckinney</td>
        <td>lisa.watson@example.com</td>
        <td>Mannheim</td>
        <td>
          <div class="confirmWindow hidden">
            <p class="confirmWindowText">Are you sure want to delete?</p>
            <button class="buttonYes">Yes</button>
            <button class="buttonNo">No</button>
          </div>
        <button class="trashIcon"><i class="far fa-trash-alt" ></i></button>
        </td>
      </tr>
      <tr class="table-row">
        <th scope="row">2</th>
        <td>Savannah Howard</td>
        <td>jeff.brown@example.com</td>
        <td>Marburg</td>
        <td>
          <div class="confirmWindow hidden">
            <p class="confirmWindowText">Are you sure want to delete?</p>
            <button class="buttonYes">Yes</button>
            <button class="buttonNo">No</button>
          </div>
        <button class="trashIcon"><i class="far fa-trash-alt" ></i></button>
        </td>
      </tr>
    </tbody>
  </table>
<script src="tabelle.js" charset="utf-8"></script>
</body>
</html>

【问题讨论】：

e.currentTarget 是按钮本身，它不包含“窗口”。窗口是e.target.closest('.confirmWindow')。
感谢@teemu 的帮助

标签： javascript html css dom

【解决方案1】：

这一行：

e.currentTarget.querySelector('.confirmWindow').classList.add('hidden');

正在“否”按钮元素内寻找类confirmWindow 的元素。我们正在尝试隐藏作为按钮父级的确认窗口，所以显然这不起作用。

更简单的方法是简单地使用 parentElement 属性引用父级。

要显示垃圾桶图标，我们可以使用nextElementSibling 属性来获取下一个兄弟。

const deleteButton = document.querySelectorAll('.trashIcon');
const buttonYes = document.querySelectorAll('.buttonYes');
const buttonNo = document.querySelectorAll('.buttonNo');

function openWindow() {
  this.parentNode.querySelector('.confirmWindow').classList.remove('hidden');
  this.classList.add('hidden');
}

function closeDeleteWindow(e) {
  e.target.parentElement.nextElementSibling.classList.remove('hidden');
  e.target.parentElement.classList.add('hidden');
}

for (let i = 0; i < deleteButton.length; i++) {
  deleteButton[i].addEventListener('click', openWindow);
}

for (let i = 0; i < buttonNo.length; i++) {
  buttonNo[i].addEventListener('click', closeDeleteWindow);
}

table {
  font-family: Nunito Sans;
  font-style: normal;
  font-weight: normal;
  width: 100%;
  align-items: flex-start;
  padding: 0px;
}

td,
th {
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  font-size: 14px;
  line-height: 115%;
  letter-spacing: 0.01em;
}

thead th {
  padding: 16px!important;
}

tr:nth-child(even) {
  background-color: #abb3c2;
}

.header {
  background-color: #05111A;
  color: white;
}

.table-row {
  height: 65px;
}

.table-download {
  font-family: 'Nunito Sans', sans-serif;
  text-decoration: none;
  color: #05111A;
}

.table-download i {
  margin-right: 3px;
}

.hidden {
  display: none;
}

.trashIcon {
  cursor: pointer;
  border: none;
  background-color: transparent;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="tabelle.css">
  <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet">
</head>

<body>
  <table class="table">
    <thead>
      <tr class="header">
        <th scope="col">UserID</th>
        <th scope="col">Name</th>
        <th scope="col">Email Address</th>
        <th scope="col">Standort</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row">
        <th scope="row">1</th>
        <td>Audrey Mckinney</td>
        <td>lisa.watson@example.com</td>
        <td>Mannheim</td>
        <td>
          <div class="confirmWindow hidden">
            <p class="confirmWindowText">Are you sure want to delete?</p>
            <button class="buttonYes">Yes</button>
            <button class="buttonNo">No</button>
          </div>
          <button class="trashIcon"><i class="far fa-trash-alt" ></i></button>
        </td>
      </tr>
      <tr class="table-row">
        <th scope="row">2</th>
        <td>Savannah Howard</td>
        <td>jeff.brown@example.com</td>
        <td>Marburg</td>
        <td>
          <div class="confirmWindow hidden">
            <p class="confirmWindowText">Are you sure want to delete?</p>
            <button class="buttonYes">Yes</button>
            <button class="buttonNo">No</button>
          </div>
          <button class="trashIcon"><i class="far fa-trash-alt" ></i></button>
        </td>
      </tr>
    </tbody>
  </table>
  <script src="tabelle.js" charset="utf-8"></script>
</body>

</html>

【讨论】：