如何使用1个“ X”关闭按钮关闭div元素，在多个div上实现，每个按钮关闭1个div？

Question

我所有这些选项（矩形）都带有（'.caja'）类，此类是放置选项的矩形的样式，它将包含数据库的值。

那么，我怎么能告诉jQuery和CSS只关闭一个div元素，因为用户在此过程中可能会忽略其他选项？我尝试使用主类元素（.caja），但不幸的是，它使所有div关闭。

我也尝试用数字命名它们，但是不幸的是，这似乎不是一个好主意，因为这将意味着很多重复的代码。

<div class="d-inline-flex flex-wrap row justify-content-center">
  <div class="caja caja-1" style="background-color: white;">
    <label class="caja-label">Administración de empresas</label>
    <label class="container-caja">
            <input type="checkbox" id="myCheck" onclick="myFunction()">
            <span class="checkmark"></span>
          </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Negocios Internacionales</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck2" onclick="myFunction2()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck3" onclick="myFunction3()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
            <input type="checkbox" id="myCheck4" onclick="myFunction4()">
            <span class="checkmark"></span>
          </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
            <input type="checkbox" id="myCheck5" onclick="myFunction5()">
            <span class="checkmark"></span>
          </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck6" onclick="myFunction6()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck7" onclick="myFunction7()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck8" onclick="myFunction8()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Administración de empresas</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck9" onclick="myFunction9()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck10" onclick="myFunction10()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck11" onclick="myFunction11()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
              <input type="checkbox" id="myCheck12" onclick="myFunction12()">
              <span class="checkmark"></span>
            </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
                  <input type="checkbox" id="myCheck13" onclick="myFunction14()">
                  <span class="checkmark"></span>
                </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
                  <input type="checkbox" id="myCheck14" onclick="myFunction14()">
                  <span class="checkmark"></span>
                </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
                  <input type="checkbox" id="myCheck15" onclick="myFunction15()">
                  <span class="checkmark"></span>
                </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

  <div class="caja" style="background-color: white;">
    <label class="caja-label">Carrera</label>
    <label class="container-caja">
                  <input type="checkbox" id="myCheck16" onclick="myFunction16()">
                  <span class="checkmark"></span>
                </label>
    <button type="button" class="btn-cerrar"> X </button>
  </div>

我想知道是否有一种方法可以实际上关闭每个关闭按钮1个div元素，从而在您只想关闭一个div而不是全部关闭时阻止关闭所有框。

Answer 1

处理此问题的一种方法是让该函数对DOM元素（相对于实际单击的元素）起作用。例如，以下代码隐藏了.caja元素，它是与被单击元素最接近的父元素（在点击处理程序中为$('this')）：

$('.btn-cerrar').click(function() {
  $(this).closest('.caja').hide()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caja" style="background-color: white;">
  <label class="caja-label">Item 1</label>
  <button type="button" class="btn-cerrar"> X </button>
</div>

<div class="caja" style="background-color: white;">
  <label class="caja-label">Item 2</label>
  <button type="button" class="btn-cerrar"> X </button>
</div>

<div class="caja" style="background-color: white;">
  <label class="caja-label">Item 3</label>
  <button type="button" class="btn-cerrar"> X </button>
</div>

<div class="caja" style="background-color: white;">
  <label class="caja-label">Item 4</label>
  <button type="button" class="btn-cerrar"> X </button>
</div>