Dynamically Add-Remove-Row HTML div in jQuery.


Adding and removing a div is not very simple you need to take a bit care for all things in HTML5.
Here is a simple example of Add and delete a Div in jQuery.

How to append and remove div in jQuery?

  • You need to First Create a button and name it an Add Row Button.
  • Create an onclick Function or assign an id to that HTML, Add Row Button.
  • In onclick function write HTML elements tag that you need to append to div using jQuery
  • Last, append the particular div using jquery append Method.


How to remove particular div in jQuery?

  • Remove particular div you need to first create a Delete or Remove Button.
  • Create a onclick Function or assign an id to that HTML Delete or Remove button.
  • Inside onclick function first, you need to check the length. If length is not greater then one then no need to delete a div in jquery.
  • Remove the last div using jquery remove method.


Here is a code that can help you to Add and Remove HTML elements using jQuery.
how-to-add-remove-div-using-jquery

dynamic-add-remove-html-elements-using-jquery


 
<head>
<title>Html5 Add and remove Div using Jquery</title>
</head>
<body>
 <div class="jumbotron jumbotron-fluid" id="dataAdd">
            
          </div> </body>

Append and remove div jQuery Code
    <script type="text/javascript>

    $(document).ready(function () {
    
$("#addRow").click(function(){

var len=$('#dataAdd .container .form-row').length+1;

//if(len>1)

 $("#dataAdd .container:last").append(' 
'+ '
'+ ' '+ ' '+ '
'+ '
'+ ''+ ''+ '
'+ ''+ ''+ '
'); }); }); $("#deleteRow").click(function(){ var len=$('#dataAdd .container .form-row').length; if(len>1){ $("#dataAdd .container .form-row").last().remove(); }else{ alert('Not able to Delete'); } }); </script>

In the above, we have used onclick function to append div in jquery. For appending we first get a particular div using class or id in which we need to append then using div class name we able to append to the last.

Remove particular div in jquery or Delete a div. We have used DeleteRow onclick function it will delete/remove your last div.

To remove a div you also need to check the length of a particular div if the length is less then one no need to delete a div else delete.
You need jQuery plugins to use onclick function.

Source Code: GITHUB
HOPE THIS HELP YOU

Post a Comment

Previous Post Next Post