无法从内部删除 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">&nbsp; <span class="close" onclick="closeExpandedProject(this)">X</span></div>Javascript：function closeExpandedProject(element) {&nbsp; &nbsp; const expandedElement = element.parentNode;&nbsp; &nbsp; expandedElement.classList.remove('expanded');&nbsp; }

Answer 2

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

Answer 3

使用目标选择器将事件侦听器添加到对象而不是编写 onclick=foo()您可以使用 Id 或 ClassName 来完成。使用 ClassName，它选择了一个对象列表，因此您必须访问第 0 个索引document.getElementsByClassName("close")[0].addEventListener("click", closeExpandedProject);直接使用 Iddocument.getElementById("close").addEventListener("click", closeExpandedProject);function closeExpandedProject() {&nbsp; console.log("in function")&nbsp; const expandedElement = document.querySelector('.expanded');&nbsp; expandedElement.classList.remove('expanded');}document.getElementsByClassName("close")[0].addEventListener("click", closeExpandedProject);.expanded { border: 1px solid black; }<div class="project-item-wrapper expanded">&nbsp; Here is some text&nbsp; <span class="close" id="close">X</span></div>