Question

从父元素 javascript 中删除类

2020-08-04

7474

javascript

我有一个通过 onclick 函数打开的容器。然后我在容器内有一个十字，它应该关闭父元素，但是我收到了

TypeError: undefined is not an object (evaluating 'parent.id')

代码在这里

<div class="post" onclick="postClick(el)">
...
...
</div>

JavaScript

function postClick(el) {
                     document.getElementById(el.id).classList.add("read");
             }
             function postClose(event) {
                 var parent = this.parentNode;
                 console.log(parent.id);
                 parent.id.classList.remove("read");         
             }

Answer 1

使用 event.target 获取对 HTML 元素的引用。并且在 parent.id.classList 表达式中有一个额外的 .id 。

function postClick(event) {
  const el = event.target;
  document.getElementById(el.id).classList.add("read");
}

function postClose(event) {
  const el = event.target;
  const parent = el.parentNode;
  console.log(parent.id);
  parent.classList.remove("read");         
 }

<div class="post" onclick="postClick(event)">
...
...
</div>

Answer 2

document.querySelector('#toggle').addEventListener('click', function (e) {
  console.log(this.parentNode.classList.remove('read'))
});

div {
  padding: 20px 50px;
}

div.read {
  background-color: red;
}

<div class="read">
  <button id="toggle">Remove Parent Class</button>
</div>

Answer 3

只需使用这个，您就完成了：😊

element.parentNode.classList.remove("class-name");

THENETSPIDER

2022-07-27