Search by Queries/Bugs/Errors

Add and remove input fields on click button using jQuery

Created at 05-Jul-2021 , By samar

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

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Mongodb Nodejs Php Python React Sql Typescript Vuejs Wordpress

Add and remove input fields on click button using jQuery

Add and remove input fields on click button using jQuery

Random Code Snippet Queries: Jquery

Latest Code Snippets