CODEWITHSUNDEEP
jquery
Usman Khan
Usman Khan

Reputation: 179

on click removing all elements in jquery

I have created a jquery dynamic elements showing As of now when ever I click on single elements it deletes all can anyone help me out why is this happening or is there a way it can be done if I click on 1 element it it will remove 1 only 

$(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

Upvotes: 1

Views: 48

Answers (3)

Varun Malhotra
Varun Malhotra

Reputation: 1202

You just have to make your jquery like this:

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

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4472

Take a look. https://jsfiddle.net/hk0d5exr/5/
$(this).parent().parent() only access to the parent of the element clicked.
Let me know if help.
Cheers

Upvotes: 1

Curiousdev
Curiousdev

Reputation: 5778

Use .closest() to find element which needs to remove instead of selecting all elements

$(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>

Upvotes: 2

Related Questions