Dynamically Added Remove-able Content With jQuery

<html>  <head>
</head>
<body> <button id="my-button">Click to Add</button>

<div id="content-container">
<!-- Content will appear here -->
</div>
</body></html>
var addedElements = [];
var elementNum = 0;
$('#my-button').on('click', function() {
// code to add new element will be called here
});
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++;
});
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
});
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');
});
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 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);
}});

--

--

Creator of Goalsmash.net. Help others achieve their goals. Get paid.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joel Masters

Joel Masters

Creator of Goalsmash.net. Help others achieve their goals. Get paid.