Javascript 单击子按钮时将活动切换类添加到父分区

var elements = document.getElementsByClassName("toggle-class-button");

var setActive = function() {
  let closestElement = this.closest('.parent-div');

  if (closestElement.classList.contains('active')) {
    closestElement.classList.remove('active')
  } else {
    closestElement.classList.add('active')
  }
};

Array.from(elements).forEach(function(element) {
  element.addEventListener('click', setActive);
});

.active {
  color: red;
}

<div class="parent-div">
  <div class="title-of-the-section">Section title</div>
  <button class="toggle-class-button">Add "active" class to parent div of ['parent-div']</button>
</div>

<div class="parent-div">
  <div class="title-of-the-section">Section title</div>
  <button class="toggle-class-button">Add "active" class to parent div of ['parent-div']</button>
</div>

<div class="parent-div">
  <div class="title-of-the-section">Section title</div>
  <button class="toggle-class-button">Add "active" class to parent div of ['parent-div']</button>
</div>

<div class="parent-div">
  <div class="title-of-the-section">Section title</div>
  <button class="toggle-class-button">Add "active" class to parent div of ['parent-div']</button>
</div>