how to add close button in Appended Items?

Question

I work on a project where I use the Localstorage function along with clone and it works fine

but the problem how to add number increment in .count class like I click on save1 save2 save3 then total number count shown like

3

Here is Demo of my code JsFiddle Demo

here is my code below where I try to add .count system along with all append elements but I am not able to add

$('.item-all .item-save').click(function() {
  $(this).toggleClass('productad')
  window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('productad'));
});
$('.item-all .item-save').each(function() {
  var id = 'test' + this.dataset.id;
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    $(this).clone().appendTo('.item-append');
  }
});
$(".item-all .item-save").click(function() {
  var existing = $(".item-append [data-id=" + $(this).data("id") + "]");
  if (existing.length > 0)
    existing.remove();
  else
    $(this).clone().appendTo('.item-append');
});
$(".close").click(function() {
localStorage.removeItem("'test' + this.dataset.id"), $(this).removeClass('productad');
  
});

.item-save {
    position: relative;
    display: block;
    font-size: 14px;
    width:80px;
    margin: 5px;
    padding: 5px;
    background: #a5a5a5;
    text-align: center;
    cursor: pointer;
}
.item-all{display:flex}
.productad{background:red;color:#eee}




Save1


Save2


Save3


save4




3

The close buttons look like this I need

Any kind of help or suggestions is highly appreciated

user_9676887 · Answer

If you check you can create a function and there create a div element and append the cloned item and append a close button created from the code, then you can reuse that function to create elements from any method, you just need to pass the selected object and in the "close" method you can use the function "parent" to select the "div" parent element and get the attribute id from there, like the code below.

function createItem(item){
    var elemId = item.data("id");
    var clonedItem = item.clone();
    var newItem = $(``);
    newItem.append(clonedItem);
    newItem.append(``)
    newItem.appendTo('.item-append');
}

function countSaveItems(){
    $('.count').html($(".item-append div.item-save[data-id]").length);
}


$('.item-all .item-save').click(function() {
  $(this).toggleClass('productad')
  window.localStorage.setItem('test_' + this.dataset.id, $(this).hasClass('productad'));
});
$('.item-all .item-save').each(function() {
  var id = 'test_' + $(this).data("id"); //
  if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
    $(this).addClass('productad');
    createItem($(this));
    countSaveItems();
  }
});
$(".item-all .item-save").click(function() {
  var elemId = $(this).data("id");
  var existing = $(`.item-append div[data-id="${elemId}"]`);
  if (existing.length > 0){
    existing.remove();
  }else{
    createItem($(this));
  }
  countSaveItems();
});

$(".item-append").on("click", ".close", function() {
    var id = $(this).parent().data("id");
    localStorage.removeItem(`test_${id}`);
  $(`.item-save[data-id='${id}']`).removeClass('productad');
    $(this).parent().remove();
  countSaveItems();
  
} );

.item-save {
    position: relative;
    display: block;
    font-size: 14px;
    width:80px;
    margin: 5px;
    padding: 5px;
    background: #a5a5a5;
    text-align: center;
    cursor: pointer;
}
.item-all{display:flex}
.productad{background:red;color:#eee}




Save1


Save2


Save3


save4

how to add close button in Appended Items?

1 Answers