Skip to main content

Add and remove input fields on click button using jQuery

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>

    JQuery script 

    <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