On append, count the newly created div and destroy this div when a new div is appended

Question

On click, a div is appended, on second click another div is created with the same contents making it an exact duplicate.

Q: How do i destroy the previous div when a new one is created?

$(document).on('click', '.LibSectOpen', function() {
         var LibSect = ($(this).find('.SectionName').html())
         $(this).find('.SectionName').empty()
         $(this).append('<div class="LibraryBooks BooksHolder"><img height="30" width="30" class="LibraryBooksGIF" src="../images/ic_loading.gif"></div>').load(function(e) {

        });

possible duplicate of [After first click, If ajax is done, on second click e.stopPropagation](http://stackoverflow.com/questions/21722694/after-first-click-if-ajax-is-done-on-second-click-e-stoppropagation) — Arun P Johny, Feb 12 '14 at 08:48
you just asked the same question in another thread - http://stackoverflow.com/questions/21722694/after-first-click-if-ajax-is-done-on-second-click-e-stoppropagation/21722742#21722742 — Arun P Johny, Feb 12 '14 at 08:49

score 1 · Answer 1 · answered Feb 12 '14 at 08:53

Try this.

HTML

<div id="container"></div>
<button>Add Content</button>

jQuery Code

$('button').on('click', function(){
        $('#container').empty();
        $('#container').append('<div class="LibraryBooks BooksHolder">this is dynamicaly added text</div>');

});

Demo

score 1 · Answer 2 · answered Feb 12 '14 at 09:00

You should remove the old div at first before appending the new one.

$(document).on('click', '.LibSectOpen', function() {
     var LibSect = ($(this).find('.SectionName').html());
     $(this).find('.SectionName').empty();
     $(this).find('.BooksHolder').remove();
     $(this).append('<div class="LibraryBooks BooksHolder"><img height="30" width="30" class="LibraryBooksGIF" src="../images/ic_loading.gif"></div>');
});

On append, count the newly created div and destroy this div when a new div is appended

2 Answers2