JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" onclick="remove(Z1)" style="width:70px;" value="Z1">
<input type="button" onclick="remove(Z2)" style="width:70px;" value="Z2">
<input type="button" onclick="remove(Z3)" style="width:70px;" value="Z3">
<main id="main">
  <article id="article">
    <div class="points Z1">
      <h3>point1</h3>
    </div>
    <div class="points Z1">
      <h3>point2</h3>
    </div>
    <div class="points Z1">
      <h3>point3</h3>
    </div>
    <div class="points Z1">
      <h3>point4</h3>
    </div>
    <div class="points Z2">
      <h3>point5</h3>
    </div>
    <div class="points Z2">
      <h3>point6</h3>
    </div>
    <div class="points Z2">
      <h3>point7</h3>
    </div>
    <div class="points Z2">
      <h3>point8</h3>
    </div>
    <div class="points Z3">
      <h3>point9</h3>
    </div>
    <div class="points Z3">
      <h3>point10</h3>
    </div>
    <div class="points Z3">
      <h3>point11</h3>
    </div>
    <div class="points Z3">
      <h3>point12</h3>
    </div>
  </article>
</main>

JavaScript

const Z1 = document.querySelectorAll('.Z1');
const Z2 = document.querySelectorAll('.Z2');
const Z3 = document.querySelectorAll('.Z3');
const points = document.querySelectorAll('.points');


const remove = (elms) => {
	// pointsクラスの要素全てのdisplayを初期化する（表示する）
  points.forEach(point => point.style.display = '');
  
  // 対象の要素を全てdisplay: noneにする
  elms.forEach(elm => elm.style.display = 'none');
}