Event problem 3

Event removed from parent.

by Creak

HTML

<div id=listwrap>
  <ul class="parentlist">
    <li class="item">
      <a href="#">*</a>
    </li>
    <li class="parentitem">
      <a href="www.google.com">Parent</a>
      <ul class="childlist">
        <li class="childitem">
          <a href="www.google.com">Google</a>
        </li>
        <li class="childitem">
          <a href="www.google.com">Google</a>
        </li>
        <li class="childitem">
          <a href="www.google.com">Google</a>
        </li>
        <li class="closebutton">
          <a href="#">Close</a>
        </li>
      </ul>
    </li>
    <li class="item">
      <a href="#">*</a>
    </li>
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

a {
  display: inline-block;
  width: 100%;
  padding: 20px 0;
}

ul {
  list-style-type: none;
  width: 100%;
  position: relative;
}

.parentlist a {
  color: #e8e8e8;
  background-color: #7f7f7f;
}

li {
  display: inline-block;
  width: 20%;
  text-align: center;
}

.childlist {
  display: none;
  position: absolute;
  width: 20%;
}

.childlist.active {
  display: block;
}

.childlist li {
  width: 100%;
}

.childlist a {
  color: #323232;
  background-color: #e2e2e2;
}

.childlist a:hover {
  color: #e8e8e8;
}

#msgbox {
  width: 100%;
  margin-top: 250px;
  font-size: 24px;
}

.closebutton a {
  color: #e8e8e8;
  background-color: #7f7f7f;
}

a:hover {
  background-color: #444;
}

JavaScript

function childToggle(event) {
  event.preventDefault();
  event.stopPropagation();

  this.removeEventListener('click', childToggle, true);

  var child = this.querySelector('ul');
  child 
    ? add = true 
  	: add = false;
    
  actions(this);    

  function actions(clickedNode) {
  	switch(add) {
    	case true:
      	child.classList.add('active');
        clickedNode.querySelector('.closebutton').addEventListener('click', childToggle, true);
        break;
      case false:
      	clickedNode.parentNode.classList.remove('active');
        clickedNode.parentNode.parentNode.addEventListener('click', childToggle, true);        
    }
  }
}

document.querySelector('.parentitem').addEventListener('click', childToggle, true);