Удалить класс из родительского элемента javascript

Question

У меня есть контейнер, который открывается с помощью функции 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. И у вас есть лишнее .id в выражении parent.id.classList.

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

Один из способов сделать это - использовать чистый Javascript и привязать прослушиватель событий следующим образом

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

, если проект сложный и требует интерактивности чаще, чем часто, тогда вы используете jquery библиотеку для интерактивности.

//to remove class
$( "p" ).removeClass( "myClass yourClass" )


$("#div123").toggle(); //if you want to temp hide elements

поскольку ваш код предполагает, что элементы «чтения» должны быть отключены, вы можете переключить их после того, как обработчик событий обернут поверх метода переключения. вы можете передать this или $ (this), если вы хотите что-то сделать с владельцем вызова функции.

хорошо, я согласен, что некоторым опытным разработчикам не понравился этот ответ, это наверняка будет некоторая помощь некоторым начинающий разработчик в будущем, который ищет альтернативный вариант скрытия элементов или удаления классов