Dynamically Add Field using jQuery

learn js

आज इस आर्टिकल मे हम आपको Dynamically Add Field using jQuery के बारे मे बताएंगे।

Project :- Dynamically Add Field using jQuery


  • Difficulty – Easy
  • Files – 2
  • Index.html & own.js
  • CDN Used


<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dynamic Field Add - By Hindialerts.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css">
    <style type="text/css">


    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <form action="" method="post">
                        <ul class="list-unstyled" id="sites">
                                <label>Name</label><input type="text" value="" class="form-control" />
                        <input class="btn btn-danger" type="button" id="add" value="Add More" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="own.js"></script>



$(document).ready(function () {
    $(document).ready(function () {
        $('#add').click(function () {
            var str = '<li class="list-item">';
            str += '<label>Name</label><input class="form-control mb-2" type="text" value=""/> ';
            str += '<input type="button" class="btn btn-danger float-right mb-2 remove" value="remove" /> ';
            str += '</li>';
        $(document).on('click', '.remove', function () {

This is only for learning purpose that you can understand easily. If you get any error or want to something new to learn share details below.

इसे भी पढ़े – BHU CHS के नौवीं और ग्याहरवीं क्लास का रिजल्ट कैसे चेक करें?


इसे भी पढ़े – HSSC Fire Station Officer, Sub Fire Officer रिजल्ट कैसे चेक करे?

Other Important Topics

इसे भी पढ़े – CDN क्या है और अपनी वेबसाइट पर CDN को कैसे इस्तेमाल करें?

इसे भी पढ़े – Simple PHP CRUD Operations without Page Refresh jQuery Ajax MySQL

Final Words

  • आज इस आर्टिकल मे हमने आपको Dynamically Add Field using के बारे मे बताया।
  • अगर आपको इसके बारे कुछ और जानना है।
  • तो आप निचे दिए गया कमेन्ट बॉक्स मे कमेन्ट कर के पूछ सकते है।

इसे भी पढ़े – हाइट बढ़ाने के लिए Exercise – Top 4 Exercise for Height Growth Hindi


No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *