CODEWITHSUNDEEP
jquery
Alexander Hein
Alexander Hein

Reputation: 990

Run Function after element appear in DOM

How can I remove a class from a element after it is loaded in the DOM ?

Following situation:

If a element with the classname selected appear in DOM I like to remove the class highlight from it.

Example:

<div class="selected highlight">
<div class="group">Material</div>
<div class="option">350g Chromo-Sulfatkarton matt</div>
</div>

Upvotes: 2

Views: 2437

Answers (4)

Pierre C.
Pierre C.

Reputation: 1430

Every answer uses jQuery. In my opinion CSS is more relevant here.

I made this snippet using CSS keyframes and animation.

function create() {
  var element = $("<p class='selected highlight'>" + Math.random() + "</p>");
  $("#container").prepend(element);
}
.selected {
  -webkit-animation: highlight 1s infinite;
  -moz-animation: highlight 1s;
  -o-animation: highlight 1s;
  animation: highlight 1s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes highlight {
  from {
    background-color: red;
  }
  to {
    background-color: none;
  }
}

/* Standard syntax */
@keyframes highlight {
  from {
    background-color: red;
  }
  to {
    background-color: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick='create()'>Create an element</button>
<div id="container"></div>

Upvotes: 1

patilprashant6792
patilprashant6792

Reputation: 353

I think you can use the DOMNodeInserted insert event of jquery as below

$('body').on('DOMNodeInserted', function(e) {
  if ($(e.target).hasClass('selected')) {
    $(e.target).removeClass('highlight')
  }
});

Upvotes: 1

abhijat_saxena
abhijat_saxena

Reputation: 980

$("div.selected").ready(function() {
 $("div.selected").removeClass("highlight") 
});

Upvotes: 1

PeterKA
PeterKA

Reputation: 24648

Depending on whether you load the element with the page, in which case you would listen for the DOM ready event, or some other event, the following code should be fired when the appropriate event happens:

$('.selected.highlight').removeClass('highlight');

If listening for DOM ready event the code would be:

$(function() {
    $('.selected.highlight').removeClass('highlight');
});

Upvotes: 2

Related Questions