CODEWITHSUNDEEP
jquery
user_777
user_777

Reputation: 805

how can we remove closest div comes out of the parent div

Here I want to remove the closest div comes inside a foreach loop,the structure looks like this 

<div id="add_new">
 <div class="form-group mb0 hhhh" style="margin-bottom: 0px">
       <?php foreach ($document_inf as $document_in){ ?>
        <div class="label1000">
            <input type="text" class="label100" required name="document_name[]" value="<?php echo $document_in;?>" >
         </div>
      <?php }?>
    <div class="col-sm-5 hhh">
       <div class="fileinput fileinput-new hh" data-provides="fileinput">
       <?php foreach ($document_info as $document_info){ ?>      
       <div class="h">

          <strong>
             <a href="javascript:void(0);" class="RCF"><iclass="fa fa-times">            </i>&nbsp;Remove</a>
          </strong>
       </div>
     <?php }?>
     </div>
</div>

Here when i click class RCF i want to remove the correspondent class label1000 div.so for that i had done like this

$("a.RCF").click(function () {

       $(this).parents("div").find('.label1000').remove();
 });

when i done this the entire div with class name label1000 is getting deletedenter image description here

Upvotes: 0

Views: 82

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

From the comments under the question it appears that you want to remove the .label1000 element which matches the index of the clicked .RCF element.

In order to do that you can use index() to get the index of the clicked element, then eq() to select the .label1000 element which matches that. Try this:

$("a.RCF").click(function() {
  var $h = $(this).closest('.h')
  $('.label1000').eq($h.index()).remove();
  $h.remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="add_new">
  <div class="form-group mb0 hhhh" style="margin-bottom: 0px">
    <div class="label1000">
      <input type="text" class="label100" required name="document_name[]" value="A">
    </div>
    <div class="label1000">
      <input type="text" class="label100" required name="document_name[]" value="B">
    </div>
    <div class="col-sm-5 hhh">
      <div class="fileinput fileinput-new hh" data-provides="fileinput">
        <div class="h">
          <strong> 
              <a href="javascript:void(0);" class="RCF">
                <i class="fa fa-times"></i>&nbsp;
                Remove
              </a>
            </strong>
        </div>
        <div class="h">
          <strong> 
              <a href="javascript:void(0);" class="RCF">
                <i class="fa fa-times"></i>&nbsp;
                Remove
              </a>
            </strong>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions