如何更改属于parentNode分支的div父元素的颜色？

Question

** 当我单击最后一个父元素内的按钮时，我想更改属于 parentNode 分支的前一个父元素的颜色，它适用于第一个父元素，但不适用于前一个父元素。你能向我解释为什么以及如何解决这个问题吗？

   document.getElementById('parent').addEventListener('click', event);

   function event(event){
        event.preventDefault();   
        if(event.target !== event.currentTarget) ;
         event = document.getElementById(event.target.id);
        if(event);
        return parent(event.parentNode);
    }

  function parent(element){

        if(element.dataset.parent){
          element.dataset.parent = (element.dataset.parent === "true") ? "false" : "true";
        }
    return;
}

.flex {
 display: flex;
 justify-content: center;
 align-items: center;
}
.container {
 width:100%;
 height: 100%; 
}
.box {
  width: 400px;
  height: 400px;
  border: 2px solid blue;
}

.inner-box {
  width: 200px;
  height: 200px;
  flex-direction: column;
  gap: 20px;
  background: green;
  }

.inner-box > button{
  padding: 10px;
  background: white;
  border: 1px solid black;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  }

.inner-box > button:hover{
  background: #D3D3D3;
  }

.box[data-parent="false"] {
  backgroud: white;
}

.box[data-parent="true"] {
  background: blue;
}

<div class="container flex" id="parent">
  <div class="box flex" data-parent="false">
    <div class="inner-box flex">
      <button id="button">Click me</button>
    </div>
  </div>
</div>