Remove Div from jquery when checkbox is clicked

user_12757408 0
Viewed 19

I have to implement the logic when add button is clicked,it will add the input field and when remove button is clicked it removes the fields, For this requirement code is working fien,but when i add checkbox ,if checkbox is clicked the requirement is that input field should be disabled and all new input fields will be removed,in my case only one input filed removes,i have to remove all fields.

            var maxField = 5; //Input fields increment limitation
            var add_button = $('#add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper
            var fieldHTML = '<div id="fieldhtml"><input type="text" name="socials[]" value=""  />
<a href="javascript:void(0);" class="remove_button"><img src="{{ 'remove-icon.png' | asset_url }}"/></a></div>'; //New input field html
            var x = 1; //Initial field counter is 1


<div class="col-lg-6 col-sm-12">
                                <div class="input-icons pt-2">
                                   <label for="socials">Socials <span class='req'>*</span></label>
                                       <div class="input-icon">
                                        <a href="javascript:void(0);" class="add-button" title="Add field" id="add_button"> <i class="plus"></i></a>

                                             <div class="icon"></div>

                                         <div class="field_wrapper">
                                 
                                     <input type="text" class="validate input-field validate-input-structure" data-input-type="text" name="socials[]" value=""  id="socials"  required />
                                           
                                       </div>
                                        <label for="chksocials">
                                     <input type="checkbox" id="chksocials" name="chksocials" />
                                            My business doesn’t have social media
                                             </label>
                                      </div>   
                   
                                       
                                    </div>
   
                            </div>


      $(function(){
          
            //Once add button is clicked
            $(add_button).click(function(){
                //Check maximum number of input fields
                if(x < maxField){
                    x++; //Increment field counter
                    $(wrapper).append(fieldHTML); //Add field html
                }
            });

            //Once remove button is clicked
            $(wrapper).on('click', '.remove_button', function(e){
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                x--; //Decrement field counter
            });
        
        
            $("#chksocials").click(function () {
                if ($(this).is(":checked")) {
                    $("#add_button").attr("disabled", "disabled");
                    
                    $("#socials").attr("disabled", "disabled");
                    
                  $("#fieldhtml").remove();

                } else {
                  
                
                   
                     $("#socials").removeAttr("disabled");
                    $("#fieldHTML").removeAttr("disabled");
                    $("#add_button").removeAttr("disabled");
                    //$("#fieldhtml").parent('div').show();
                      $("#socials").focus();
                }
            });
jquery javascript
1 Answers

You need to define the fieldHTML based on the Jquery Documentation.

// HTML
<div class="col-lg-6 col-sm-12">
  <div class="input-icons pt-2">
    <label for="socials">Socials <span class='req'>*</span></label>
    <div class="input-icon">
      <a href="" class="add-button" title="Add field" id="add_button">
        ADD
      </a>

      <div class="icon"></div>

      <div class="field_wrapper">

        <input type="text" class="validate input-field validate-input-structure socials" data-input-type="text" name="socials[]" value=""  required />

      </div>
      <label for="chksocials">
        <input type="checkbox" id="chksocials" name="chksocials" />
        My business doesn’t have social media
      </label>
    </div>   
  </div>
</div>

// JS
const add_button = $('#add_button');
const wrapper = $('.field_wrapper');

$(function(){
  const maxField = 5;
  let x = 1;

  $(add_button).click(function(e){
    e.preventDefault();
  
    if(x < maxField){
      x++;
      
      // This is to create element in JQUERY
      const fieldHTML = $('<div class="fieldhtml"><input type="text" name="socials[]" value=""  /><a href="javascript:void(0);" class="remove_button">REMOVE</a></div>'); 
      
      $(wrapper).append(fieldHTML);
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e){
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });


  $("#chksocials").click(function () {
    if ($(this).is(":checked")) {
      wrapper.hide();
    } else {
      wrapper.show();
      $(".socials").focus();
    }
  });
});

Note : do not use the same HTML ID multiple times, see here.

user_41126540
Related