Dynamically add and remove element with jQuery

In this post, I show how you can add and remove new element within your web page with jQuery.

There are two approaches for doing this –

  • Pre-made all elements
  • Dynamically create new element

The first case is easy but you have to create all of the element at once and hide them which are not required currently.

When you have to add an element you need to display the element one by one and for removing hide them.

Here the problem is there are multiple unused elements are available which occupies space within your code and makes it messy even if you don’t have needed some of the elements.

The second solution is better than the first here you create and remove an element dynamically when you have to require.

What in the demonstration ?

I am creating a basic example, which has an input element and an add button. Creating new element when the button gets clicked.

While creating new element also adding a remove Button which removes parent container of it.

Dynamically add and remove element with jQuery


Contents

  1. HTML
  2. jQuery
  3. Demo
  4. Conclusion

1. HTML

Created a <div class=’element’ id=’div_1′> which have one textbox and a <span class=’add’>.

Completed Code

<div class="container" >
 <div class='element' id='div_1'>
  <input type='text' placeholder='Enter your skill' id='txt_1' >&nbsp;<span class='add'>Add Skill</span>
 </div>
</div>

2. jQuery

When the add class gets clicked –

Calculating the┬átotal number of elements being added if it does not reach its maximum e.g. 5 then add new <div> element with a textbox and a <span class=’remove’ > otherwise not adding any more.

Here, I set the maximum value to 5 you can change it by editing the following code –

var max = 5;

When the remove class gets clicked –

Using clicked <span> element id to remove the <div> container.

Completed Code

$(document).ready(function(){

 // Add new element
 $(".add").click(function(){

  // Finding total number of elements added
  var total_element = $(".element").length;
 
  // last <div> with element class id
  var lastid = $(".element:last").attr("id");
  var split_id = lastid.split("_");
  var nextindex = Number(split_id[1]) + 1;

  var max = 5;
  // Check total number elements
  if(total_element < max ){
   // Adding new div container after last occurance of element class
   $(".element:last").after("<div class='element' id='div_"+ nextindex +"'></div>");
 
   // Adding element to <div>
   $("#div_" + nextindex).append("<input type='text' placeholder='Enter your skill' id='txt_"+ nextindex +"'>&nbsp;<span id='remove_" + nextindex + "' class='remove'>X</span>");
 
  }
 
 });

 // Remove element
 $('.container').on('click','.remove',function(){
 
  var id = this.id;
  var split_id = id.split("_");
  var deleteindex = split_id[1];

  // Remove <div> with id
  $("#div_" + deleteindex).remove();

 }); 
});

3. Demo

Click on the Add Skill Button to add a new element.


4. Conclusion

Within demonstration, I have used input fields you can do the same process with any other element like Select, Radio button, Checkbox etc.

Spread the love

Related Post

Be First to Comment

Leave a Reply

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