CODEWITHSUNDEEP
javascriptjqueryhtml
user9437856
user9437856

Reputation: 2388

How to remove the input field when more then one parent class?

I am adding dynamic fields using jQuery which is working. I am getting the issue on remove fields.

I checked on google, Past question on StackOverflow, Everyone using

$('.optionBox').on('click','.remove_button',function() {
    $(this).parent().remove();
});

or 

$('.optionBox').on('click', '.remove_button', function(e){
     e.preventDefault();
     $(this).parent('div').remove(); //Remove field html
     x--; //Decrement field counter
    });

why using above code because they have only one parent class.

$('.optionBox').append('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');

Now my issue is, I have more than 1 parent class like

$('.optionBox').append('<div class="clearfix"></div>
<div class="custom_fields">
  <div class="col-md-3">
    <div class="form_group"> 
      <input type="text" name="" class="form_control">
    </div>
  </div>
    <div class="col-md-3">
    <div class="form_group"> 
      <input type="text" name="" class="form_control">
    </div>
  </div>
<div class="col-md-3">
  <div class="row">
    <div class="col-md-6">
      <div class="form_group">
        <div class="p_a_div">
          <input type="text" class="form_control" />
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form_group"> 
        <div class="btn_row remove_field">
         <span> - </span> Remove  </div>
       </div>
     </div>
   </div>
 </div>
</div>
</div>');

I tried to remove the field so I used

$('.optionBox').on('click', '.remove_field', function(e){
        e.preventDefault();
        $(this).parent('.custom_fields').remove(); //Remove field html
        x--; //Decrement field counter
    });

but it's not working. any help in this?

Upvotes: 2

Views: 324

Answers (2)

deepak paleewal
deepak paleewal

Reputation: 11

    $('.optionBox').append(`<div class="clearfix"></div>
    <div class="custom_fields" id="deleteMe">
      <div class="col-md-3">
        <div class="form_group"> 
          <input type="text" name="" class="form_control">
        </div>
      </div>
        <div class="col-md-3">
        <div class="form_group"> 
          <input type="text" name="" class="form_control">
        </div>
      </div>
    <div class="col-md-3">
      <div class="row">
        <div class="col-md-6">
          <div class="form_group">
            <div class="p_a_div">
              <input type="text" class="form_control" />
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form_group"> 
            <div class="btn_row remove_field">
             <span> - </span> Remove  </div>
           </div>
         </div>
       </div>
     </div>
    </div>
    </div>`);
    
 $('.optionBox').on('click', '.remove_field', function (e) {

            $(this).parent('div').parent('div').parent('div').parent('div').parent('div').remove();
            //this will work if structure always be the same 
            $(this).parent().remove();
            // $('#deleteMe').remove();//if possoible delete using id
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="optionBox">


    </div>

Upvotes: 0

Just code
Just code

Reputation: 13801

What you need is the closest this will find the closest element having particular selector.

Here is the small example of it:

$('.optionBox').append('<div class="clearfix"></div> <div class="custom_fields"> <div class="col-md-3"> <div class="form_group"> <input type="text" name="" class="form_control"> </div> </div> <div class="col-md-3"> <div class="form_group"> <input type="text" name="" class="form_control"> </div> </div> <div class="col-md-3"> <div class="row"> <div class="col-md-6"> <div class="form_group"> <div class="p_a_div"> <input type="text" class="form_control" /> </div> </div> </div> <div class="col-md-6"> <div class="form_group"> <div class="btn_row remove_field"> <span> - </span> Remove </div> </div> </div> </div> </div> </div> </div>');

$('.optionBox').on('click', '.remove_field', function(e){
        e.preventDefault();
        $(this).closest('.custom_fields').remove(); //Remove field html
       
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="optionBox"></div>

Upvotes: 2

Related Questions