Everything i have read, leads more to event handlers being added using .live(), .on(), .bind(), .delegate(), etc..

I asked a question earlier that may not be ing across correctly, so i voted to delete that one and re-ask a much simpler one, from which i can do the rest i believe.

Is there a way to clear the innerhtml of an HTML element with a predefined class, including those loaded dynamically via AJAX, etc.

So every time an ajax call puts

<div class="triggerElement">something here...</div>

or similar on the page, i need it to be emptied. I think i have explained that correctly. Just let me know if not.

EDIT

Seems to be a lot of confusion. .empty & others like it will not work. If you call

$(".omButton").empty();

from the index, then some other module loads something later via AJAX with that same class, it WILL NOT empty that. If i have the element on the page first, then call it, yes it will work....

I need something along the lines of .live or .delegate that will work for any content loaded after the fact, as i have tried .empty and .html and neither work for the content that is loaded with AJAX.

Not sure how else to explain this. Thought it was pretty simple. Sorry!

EDIT 2...

index contains empty function

$(function(){
    $('.omButton').empty();
    $ajax... to load "loadedContent"
});

<div class="omButton"></div>
<div id="loadedContent"></div>

ajax returns

json_encode(array('test' => '<div class="omButton">Button Text</div>'));

So now the HTML on the index is

<div id="loadedContent"><div class="omButton">Button Text</div></div>

However since the inner div was not there when the page loaded, the .empty does not effect it. I need something that i can put on the page load that "monitors" for any occurance (static or dynamic) of it and empties it.

Hopefully that helps?

Everything i have read, leads more to event handlers being added using .live(), .on(), .bind(), .delegate(), etc..

I asked a question earlier that may not be ing across correctly, so i voted to delete that one and re-ask a much simpler one, from which i can do the rest i believe.

Is there a way to clear the innerhtml of an HTML element with a predefined class, including those loaded dynamically via AJAX, etc.

So every time an ajax call puts

<div class="triggerElement">something here...</div>

or similar on the page, i need it to be emptied. I think i have explained that correctly. Just let me know if not.

EDIT

Seems to be a lot of confusion. .empty & others like it will not work. If you call

$(".omButton").empty();

from the index, then some other module loads something later via AJAX with that same class, it WILL NOT empty that. If i have the element on the page first, then call it, yes it will work....

I need something along the lines of .live or .delegate that will work for any content loaded after the fact, as i have tried .empty and .html and neither work for the content that is loaded with AJAX.

Not sure how else to explain this. Thought it was pretty simple. Sorry!

EDIT 2...

index contains empty function

$(function(){
    $('.omButton').empty();
    $ajax... to load "loadedContent"
});

<div class="omButton"></div>
<div id="loadedContent"></div>

ajax returns

json_encode(array('test' => '<div class="omButton">Button Text</div>'));

So now the HTML on the index is

<div id="loadedContent"><div class="omButton">Button Text</div></div>

However since the inner div was not there when the page loaded, the .empty does not effect it. I need something that i can put on the page load that "monitors" for any occurance (static or dynamic) of it and empties it.

Hopefully that helps?

• javascript
• jquery
• html
• ajax

• 3 Like $(".triggerElement").html("");? – Darrrrrren Commented Nov 12, 2012 at 16:31
• 5 or $(".triggerElement").empty(); .empty – JoeFletch Commented Nov 12, 2012 at 16:32
• 1 Very poor research effort... just google "jquery empty element" – Samuel Rossille Commented Nov 12, 2012 at 16:33
• I think you misunderstood the question, OP is searching for Mutation Observers. – A. Wolff Commented Nov 12, 2012 at 16:39
• Show us your code for adding dynamic content. The empty code needs to be part of it. – Kevin B Commented Nov 12, 2012 at 16:56

3 Answers 3

Try using $.ajaxComplete() - as this is triggered after every ajax request pletes

$('body').ajaxComplete(function() {
  $('.triggerElement').empty();
});

Try this. .empty

$.ajax({
    ...
    plete: function(){
        $(elementSelectorForWhatYouWantEmptied).empty();
    }
})

or if the element that is loaded is dynamically placed in the DOM, then you can use .live().

$(elementThatIsInDOM).on(event, elementSelectorThatIsDynamicallyAdded, function(){
    $(elementSelectorForWhatYouWantEmptied).empty();
})

If you're loading content using ajax, and that content is a full on tag with content

<div class="triggerElement">something here...</div>

And you want to empty that element after it is loaded, you need to do that within the callback which gets executed when the data is loaded.

$.ajax(
    ....
    success: function(data){
      $(".omButton").empty();
    });