удалить идентификатор в div в jquery

Question

Как мне удалить кнопку, которая находится в пределах пары делений? Вот обратный html:

<div class="dashboard-container">
<button id="multi-reports">
       Click to remove
</button>
</div>


  <div class=reports">
    <div class="header">
      <button id="go-back">
        <i class="fas fa-chevron-left" aria-hidden="true"></i> Go Back
      </button>
    </div>
  </div>

Мой jQuery код, который я начал # go, но кнопка не удаляется.

 $(".dashboard-container").on("click", "#multi-reports", function(e) {
      $("#go-back").remove();
}

Answer 1

Используйте код ниже. Я выделяю контейнер серым цветом, нажимаю в любом месте этой серой области, и кнопка будет удалена.

$( document ).ready(function() {
  $(".container").on("click", function(e) {
        $("#go-back").remove();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="background:grey">
  <div class="reports">
    <div class="header">
      <button id="go-back">
          <i class="fas fa-chevron-left" aria-hidden="true"></i>Go Back
      </button>
    </div>
  </div>
</div>

Answer 2

Решение с чистым JS: Обратите внимание, что событие click происходит на кнопке multi-reports, а не на div

document.getElementById("multi-reports").addEventListener("click", () => {
    let element = document.getElementById("go-back");
    if(element){
      element.parentNode.removeChild(element);
    }
});

<div class="dashboard-container">
   <button id="multi-reports">
   Click to remove
   </button>
</div>
<br>
<div class="reports">
   <div class="header">
      <button id="go-back">
      <i class="fas fa-chevron-left" aria-hidden="true"></i> Go Back
      </button>
   </div>
</div>

Answer 3

Что у вас должно работать:

$(function() {//document ready
  $(".dashboard-container").on("click", "#multi-reports", function(e) {
    $("#go-back").remove();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard-container">
  <button id="multi-reports">
       Click to remove
</button>
</div>


<div class="reports">
  <div class="header">
    <button id="go-back">
        <i class="fas fa-chevron-left" aria-hidden="true"></i> Go Back
      </button>
  </div>
</div>