Remove Div from jquery when checkbox is clicked-CodePudding

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);" ><img src="{{ 'remove-icon.png' | asset_url }}"/></a></div>'; //New input field html
            var x = 1; //Initial field counter is 1


<div >
                                <div >
                                   <label for="socials">Socials <span class='req'>*</span></label>
                                       <div >
                                        <a href="javascript:void(0);"  title="Add field" id="add_button"> <i ></i></a>

                                             <div ></div>

                                         <div >
                                 
                                     <input type="text"  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();
                }
            });

CodePudding user response：

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

// HTML
<div >
  <div >
    <label for="socials">Socials <span class='req'>*</span></label>
    <div >
      <a href=""  title="Add field" id="add_button">
        ADD
      </a>

      <div ></div>

      <div >

        <input type="text"  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 ><input type="text" name="socials[]" value=""  /><a href="javascript:void(0);" >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.