Dynamically Added Remove-able Content With jQuery

2 min readFeb 20, 2018

Perhaps you are creating a to-do list, shopping cart, or something else that dynamically adds elements to the screen, but also requires the ability to remove them when users change their minds.

This can be done as follows:

Let’s begin with a <button> to press to add content to a <div> in HTML:

<html>  <head>
  </head>  <body>    <button id="my-button">Click to Add</button>
  
    <div id="content-container">
      <!-- Content will appear here -->
    </div>  </body></html>

Next, let’s add an on-click function that is called when the button is clicked to our javascript file:

var addedElements = [];
var elementNum = 0;$('#my-button').on('click', function() {
   // code to add new element will be called here});

Now, let’s write the code that will actually create a new element:

var addedElements = [];
var elementNum = 0;$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(codeToAddElement);
  elementNum++;});

Next, we need to add an event to the new elements to allow the user to remove them:

var addedElements = [];
var elementNum = 0;$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(codeToAddElement);
  elementNum++;});$('body').on('click', '.added-content', function() {
  // code to remove from screen goes here});

Inside this function, we need to get the clicked element’s id using $(this), and then use it to remove the element.

var addedElements = [];
var elementNum = 0;$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(codeToAddElement);
  elementNum++;});$('body').on('click', '.added-content', function() {
  var clickedId = $(this).attr('id');});

Next, we’ll format the id so we can use it to select the proper id, and then remove the element from the addedElements array.

var addedElements = [];
var elementNum = 0;$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(elementNum);
  elementNum++;});$('body').on('click', '.added-content', function() {
  var clickedId = $(this).attr('id');
  clickedId = clickedId.split('-')[1];
  addedElements.splice(clickedId, 1);});

Lastly, we’ll remap the array of addedElements. clear the contents of #content-container, and re-create the leftover elements:

var addedElements = [];
var elementNum = 0;$('#my-button').on('click', function() {
  var codeToAddElement = '<div class="added-content"' + 
                          'id="add-' + addedElements.length + '">'+
                            'Add #' + elementNum +
                         '</div>';
  $('#content-container').append(codeToAddElement);
  addedElements.push(elementNum);
  elementNum++;});$('body').on('click', '.added-content', function() {
  var clickedId = $(this).attr('id');
  clickedId = clickedId.split('-')[1];
  addedElements.splice(clickedId, 1);
  
  var tempArr = addedElements.map(x => x);
  addedElements = tempArr.map(x => x);$('#content-container').html("");for (let i = 0; i<addedElements.length; i++) {
   var codeToAddElement = '<div class="added-content"' + 
                           'id="add-' + i + '">'+
                           'Add #' + addedElements[i] +
                          '</div>';
   $('#content-container').append(codeToAddElement);}});

Check it out on CodePen: https://codepen.io/joelmasters/full/NyyrNo/

Thanks for reading. If you have a more efficient way to do this, let me know!

Dynamically Added Remove-able Content With jQuery

Written by Joel Masters