我无法删除我给容器的类答案

【问题标题】：I can't remove the class I gave to the container我无法删除我给容器的类
【发布时间】：2021-12-24 11:32:31
【问题描述】：

我尝试将一个类添加到我单击的文本容器中，然后该类为我单击的文本分配一种颜色。问题是当我两次单击相同的文本时，该类不会被删除。这种情况有什么解决办法吗？

请不要更改班级所在的位置

const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');

contain.addEventListener('click', e => {
  for (inCont of inConts) {
    inCont.classList.remove('red');
  }

  if (e.target.classList.contains('txt')) {
    e.target.parentElement.classList.toggle('red');
  }
});

.in-cont.red .txt {
  color: red;
}

<div class="contain">
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
</div>

【问题讨论】：

标签： javascript class toggle addeventlistener

【解决方案1】：

您可以使用closest 轻松切换类red：

closest 向上搜索 DOM 以查找与选择器。此搜索包括元素本身。

element.closest(selector)

如果找到与选择器匹配的元素，则返回元素。如果没有找到任何元素，则返回null

const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');

contain.addEventListener('click', e => {
  if (e.target.closest("div.contain")) {
    e.target.closest("div.in-cont").classList.toggle("red")
  }
});

.in-cont.red .txt {
  color: red;
}

<div class="contain">
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
</div>

【讨论】：

【解决方案2】：

删除red类时，检查inCont是否包含事件目标：

const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');

contain.addEventListener('click', e => {
  for (inCont of inConts) {
    if (!inCont.contains(e.target)) {
      inCont.classList.remove('red');
    }
  }

  if (e.target.classList.contains('txt')) {
    e.target.parentElement.classList.toggle('red');
  }
});

.in-cont.red .txt {
  color: red;
}

<div class="contain">
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
</div>

【讨论】：

它有效。但我不明白！inCont.contains(e.target)
不包含只检查一个类是否存在？
@ShaefulAmin contains 检查元素是元素的子元素，还是元素本身。