Dynamically add remove an element in jQuery
Today, we will learn How to create Dynamically add remove elements in jQuery. When we add an element, need to display the element one by one and for removing hide them. In this, tutorial, we will learn Html5 Add and remove Div using Jquery.
Also read: Detect Internet Connection using HTML CSS & JavaScript
How to add and remove div in jQuery? / How to append and remove div in jQuery?
- we create a button and name it an add element Button.
- Click add element call function or assign an id to that HTML. with writing HTML elements tag that you need to add to div using jQuery.
How to delete particular div in jQuery? / How to remove particular div in jQuery?
- Remove particular div we need to first create a button name it Delete or Remove Button.
- Onclick function or assign an id to that HTML delete.
- Now, first we need to check the length. If length is not greater then 1 then no need to delete a div.
- Then, we remove the last div using jquery.
- Also read: How to create bootstrap date picker with the current date
Below, the screenshot is a code that can help you to add and remove HTML elements using jQuery.
Example
<html>
<head>
<title>Dynamically add remove element in jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="elements" style="padding: 20px;">
<div class="container">
<h1>Dynamically add remove element in jQuery</h1><br><br>
<div class="form-row">
<div class="form-group col-md-3">
<label>First Name</label>
<input class="form-control" placeholder="First Name" type="text">
</div>
<div class="form-group col-md-3">
<label>Last Name</label>
<input class="form-control" placeholder="Last Name" type="text">
</div>
<div class="form-group col-md-3">
<label>Middle Name</label>
<input class="form-control" placeholder="Middle Name" type="text">
</div>
<div class="form-group col-md-3"></div>
<span> </span>
<button class="btn btn-success" id="addRow">Add row</button>
<button class="btn btn-danger" id="deleteRow">Delete row</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#addRow").click(function() {
var ele_len = $('#elements .container .form-row').length+1;
$("#elements .container:last").append(' <div class="form-row">'+
'<div class="form-group col-md-4">'+
' <label></label>'+
' <input class="form-control" id="first'+ele_len+'" placeholder="First name" type="text">'+
' </div>'+
'<div class="form-group col-md-4">'+
'<label></label>'+
'<input class="form-control" id="last'+ele_len+'" placeholder="Last name" type="text">'+
' </div> <div class="form-group col-md-4">'+
'<label></label>'+
'<input class="form-control" id="middle'+ele_len+'" placeholder="Middle name" type="text">'+
'</div></div>');
});
});
$("#deleteRow").click(function() {
var container_length = $('#elements .container .form-row').length;
if(container_length > 1){
$("#elements .container .form-row").last().remove();
} else {
alert('Last element is not delete!');
}
});
</script>
</body>
</html>Also read: How to Highlight Specific Dates in jQuery Datepicker
Output:
