Add and remove input fields on click button using jQuery

Updated at 04-Jul-2021, By samar

Add and remove input fields on click button using jQuery

Through the use of the programming language, we will work together to solve the "Add and remove input fields on click button using jQuery" puzzle in this lesson.

You can add and remove input fields dynamically on click button using jQuery. JQuery helps to append and remove input fields to a HTML element in an HTML document.
  • Add and remove input fields on click button using jQuery

    <!-- HTML  -->
    <div id="websiteUrlWrapper">
        <div class="form-group mb-0">
            <label for="websiteUrl">Website URL</label>
        </div>
        <div class="form-row form-group">
            <div class="col-md-5">
                <input type="text" class="form-control" id="websiteUrl" name="website_url[]" value="w3codegenerator.com">
            </div>
            <div class="col-md-5">
                <select class="form-control" id="websiteUrlType" name="website_type[]">
                    <option value="1"> Personal </option>
                    <option selected="" value="2"> Company </option>
                    <option value="3"> Blog </option>
                    <option value="4"> RSS feed </option>
                    <option value="5"> Portfolio </option>
                    <option value="6"> Other </option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="button" name="remove" class="btn btn-danger remove"><i class="fa fa-remove"></i></button>
            </div>
        </div>
    </div>
    <button type="button" name="add" class="btn btn-success btn-sm add mb-3"><i class="fa fa-plus" aria-hidden="true"></i> Add website </button>
    <p>JQuery script </p>
    <script>
        $(document).on('click', '.add', function(){
            var html = '<div class="form-row form-group">';
            html +='<div class="col-md-5">';
            html += '<input type="text" class="form-control" id="websiteUrl" name="website_url[]" value="">';
            html += '</div>';
            html +='<div class="col-md-5">';
            html += '<select class="form-control" id="websiteUrlType" name="website_type[]">';
            html +=			'<option selected="" value="1"> Personal </option>';
            html +=			'<option value="2"> Company </option>';
            html +=			'<option value="3"> Blog </option>';
            html +=			'<option value="4"> RSS feed </option>';
            html +=			'<option value="5"> Portfolio </option>';
            html +=			'<option value="6"> Other </option>';
            html +=	'</select>';
            html += '</div>';
            html += '<div class="col-md-2">'
            html += '<button type="button" name="remove" class="btn btn-danger remove"><i class="fa fa-remove"></i></button>';
            html += '</div>';
            html += '</div>';
            $('#websiteUrlWrapper').append(html);
        });
    
        $(document).on('click', '.remove', function(){
            $(this).closest('.form-group').remove();
        });
    </script>
    

    This code snippet helps you to add  input fields dynamically using jQuery. This code snippet helps you to add multiple input fields using the append method and remove input fields using jQuery remove method.

Back to code snippet queries related jquery