无法从内部删除 div 中的类，JS

Question

如您所见，我想extended从父 div 中删除类。出于某种原因，这是行不通的。我怎样才能让它工作？function closeExpandedProject() {  const expandedElement = document.querySelector('.expanded');  expandedElement.classList.remove('expanded');}.expanded { border: 1px solid black; }<div class="project-item-wrapper expanded">  Here is some text  <span class="close" onclick="closeExpandedProject()">X</span></div>

Answer 1

我相信问题是您通过 querySelector 进行选择不是您单击的元素的父级。您必须选择被单击元素的 parentNode。

这可能会解决您的问题：

<div class="project-item-wrapper expanded">

  <span class="close" onclick="closeExpandedProject(this)">X</span>

</div>

Javascript：

function closeExpandedProject(element) {

    const expandedElement = element.parentNode;

    expandedElement.classList.remove('expanded');

  }

Answer 2

所以是的，它有效，但问题来自不同的来源。我还有第二个正在添加此类的听众。所以使用后stopImmediatePropagation一切正常。如有混淆，请见谅。

Answer 3

使用目标选择器将事件侦听器添加到对象而不是编写 onclick=foo()

您可以使用 Id 或 ClassName 来完成。

使用 ClassName，它选择了一个对象列表，因此您必须访问第 0 个索引

document.getElementsByClassName("close")[0].addEventListener("click", closeExpandedProject);

直接使用 Id

document.getElementById("close").addEventListener("click", closeExpandedProject);

function closeExpandedProject() {

  console.log("in function")

  const expandedElement = document.querySelector('.expanded');

  expandedElement.classList.remove('expanded');

}

document.getElementsByClassName("close")[0].addEventListener("click", closeExpandedProject);

.expanded { border: 1px solid black; }

<div class="project-item-wrapper expanded">

  Here is some text

  <span class="close" id="close">X</span>

</div>