如何隐藏被点击元素的父辈的第一个子元素？

<div class="parent">
  <div class="child">第一个子元素</div>
  <div class="child">第二个子元素</div>
  <div class="child">第三个子元素</div>
</div>

.child:first-child {
  display: none;
}

document.querySelector('.parent').addEventListener('click', function() {
  this.querySelector('.child:first-child').style.display = 'none';
});