Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Appending and Removing Div using jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 17.4k
    Comment on it

    Append and Remove Method:

    We can use append method to add a div using jQuery and using remove method we can easily delete added div.

    Append Syntax:


    Remove Syntax:



    <!DOCTYPE html>    
    <html lang="en">    
      <meta charset="utf-8">    
      <title>Append and Remove</title>
      <script src=""></script>
      <link rel="stylesheet" href="">      
        .user_data .form-control{margin-bottom:10px;}
        .control-label{width:200px;float: left;}
    <div class="user-details">
              <div class="user_data">
                <div class="form-group">
                  <label class="control-label">Student Name</label>
                  <input name="name" class="form-control"  autocomplete="false" type="text">
                <div class="form-group">
                  <label class="control-label">Permanent Address</label>
                 <input name="address" class="form-control" autocomplete="false" type="text">
                <div class="form-group">
                  <label class="control-label">Phone No.</label>
                 <input name="phone" class="form-control" autocomplete="false" type="text">
    <div class="form-group">
              <input value="Add More" class="add_details" autocomplete="false" type="button">
          //the below code will append a new user_data div inside user-details container
            $(".user-details").append(' <div class="user_data"><div class="form-group"><label class="control-label">Student Name</label><input name="name" class="form-control"  autocomplete="false" type="text"></div><div class="form-group"><label class="control-label">Permanent Address</label><input name="address" class="form-control" autocomplete="false" type="text"></div><div class="form-group"><label class="control-label">Phone No.</label><input name="phone" class="form-control" autocomplete="false" type="text"></div><button class="remove-btn" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash-o" aria-hidden="true"></i></button></div>');
          //the above method will remove the user_data div

    In the above example we are appending user-details div using append method of jQuery and user will click on delete icon to delete the appended div.

    Working Demo:

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: