jquery - 单击删除 jquery 中的所有元素

Question

我创建了一个 jquery 动态元素，显示到目前为止，每当我单击单个元素时，它都会删除所有元素，任何人都可以帮助我解决为什么会发生这种情况，或者如果我单击 1 个元素，是否有办法完成它只会删除 1 个

$(document).on("click", ".rmove", function() {
  $(".compraision").remove();
  $('#company_graph').show();
  $('#comparision_graph').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comparision">
  <div class="compraision index_opt co_heading_area pos">
    <div class="co_info"><span class="float-left">AGIC</span>
      <p class="float-right">44%</p>
      <a class="rmove">Remove </a>
    </div>
    <div class="clearfix"></div>
  </div>

  <div class="compraision index_opt co_heading_area pos">
    <div class="co_info"><span class="float-left">PSMC</span>
      <p class="float-right">44%</p>
      <a class="rmove">Remove</a>
    </div>
    <div class="clearfix"></div>
  </div>

  <div class="compraision index_opt co_heading_area pos">
    <div class="co_info"><span class="float-left">AGTL</span>
      <p class="float-right">44%</p>
      <a class="rmove">Remove </a>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

Fiddle Link

Answer 1

使用.closest()查找需要删除的元素而不是选择所有元素

$(document).on("click", ".rmove", function() {
  $(this).closest(".compraision").remove();
  $('#company_graph').show();
  $('#comparision_graph').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comparision">
  <div class="compraision index_opt co_heading_area pos">
    <div class="co_info"><span class="float-left">AGIC</span>
      <p class="float-right">44%</p>
      <a class="rmove">Remove </a>
    </div>
    <div class="clearfix"></div>
  </div>

  <div class="compraision index_opt co_heading_area pos">
    <div class="co_info"><span class="float-left">PSMC</span>
      <p class="float-right">44%</p>
      <a class="rmove">Remove</a>
    </div>
    <div class="clearfix"></div>
  </div>

  <div class="compraision index_opt co_heading_area pos">
    <div class="co_info"><span class="float-left">AGTL</span>
      <p class="float-right">44%</p>
      <a class="rmove">Remove </a>
    </div>
    <div class="clearfix"></div>
  </div>
</div>