Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Appending and Removing Div using jQuery

    @suresh.ramola
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 15.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:

    $(selector).append(content,function(index,html))

    Remove Syntax:

    $(selector).remove(selector)

    Example:

    <!DOCTYPE html>    
<html lang="en">    
<head>    
  <meta charset="utf-8">    
  <title>Append and Remove</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">      
  <style> 
    .user_data{background:#F0F0F0;width:500px;padding:10px;margin-bottom:5px;position:relative;} 
    .user_data .form-control{margin-bottom:10px;}
    .control-label{width:200px;float: left;}
    .remove-btn{position:absolute;right:0;bottom:10%;border:none;font-size:22px;}
  </style>    
    
</head>    
<body>    
<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>
            <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>
           
            
          </div>
</div>
<div class="form-group">
          <input value="Add More" class="add_details" autocomplete="false" type="button">
</div>

 <script>    
  $(".add_details").click(function(){
    
      //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>');
    
          
  });
  $("body").on("click",".remove-btn",function(e){

       $(this).parents('.user_data').remove();
      //the above method will remove the user_data div
  });

</script>    
 </body>    
</html>

    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: https://jsfiddle.net/5cs7sfjj/6/

    JQuery jQuery append method
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
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: