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