removeClass before html()

Question

I have a variable which has two classes. I am wanting to remove the small class before the html() pushes the div to DOM.

As of right now, the div is rendering with the small class. I am wanting that to be removed.

I have tried switching the order of the removeClass to place it before the html(), but that didn't work.

$('#review').removeClass('small').html(prev);

Does anyone know how I can do this?

var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev).removeClass('small');

.big {
  color: red;
  font-size: 2rem;
}
.small {
  color: blue;
  font-size: 1.1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>

UPDATE

I tried to make my question really basic for simplicity, but it turns out, the array I had in my actual code made this more complex.

$('body').on('change', '.option-check', function() {
  var calSelectionImg = [];
  $('.calendar-check:checked').each(function() {
    calSelectionImg.push($(this).data('calendar-img'));
  });
  $('#pg-img-review').html(calSelectionImg);
});

.cal-selected-img {
  color: red;
  font-size: 2rem;
}

.small {
  color: blue;
  font-size: 1.1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Hello</div>">

<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Goodbye</div>">

<div id="pg-img-review" class="margin15"></div>

Why create the element with the `small` clas in the first place ? Or is this only some excerpt of something more complex? — krtek, Apr 05 '17 at 14:32
@krtek More complex. I just made a simple version to figure out how to do it. — Paul, Apr 05 '17 at 14:33

Neil · Accepted Answer · 2017-04-05T14:52:28.377

2

You're modifying #review, not your new code. So, I added appendTo. It's a minor restructure, but it fixes the issues with minimal complications.

var prev = "<div class='big small'>Hello</div>";
$(prev).removeClass('small').appendTo("#review");

.big {
  color: red;
  font-size: 2rem;
}
.small {
  color: blue;
  font-size: 1.1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>

edited Apr 05 '17 at 14:52

answered Apr 05 '17 at 14:29

Neil

14,063
3
30
51

Could anyone point me to anything that would be helpful to get only one selection choice to show at once? Right now, it just keep populating selections, if I click on different checkboxes. – Paul Apr 05 '17 at 15:59
In future, you need only flag once. We will know to remove all the comments. Thanks. – BoltClock Apr 06 '17 at 04:32

score 1 · Answer 2 · edited May 23 '17 at 11:46

In the example you've given, the HTML in prev is just a string. You need to parse it into a DOM object before you can call a function such as .removeClass() on it.

jQuery provides a number of options for parsing HTML elements, but as a vanilla JS over jQuery proponent, I often favour this particular approach:

var tempDiv = document.createElement('div');
tempDiv.innerHtml = "<p class='small'>The string of HTML</p>";
var parsedElement = tempDiv.firstChild;

I can then call the jQuery method parsedElement.removeClass("small") or Vanilla JS parsedElement.classList.remove("small") to successfully remove the class.

score 0 · Answer 3 · answered Apr 05 '17 at 14:31

var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev).find('.small').removeClass('small');

.big {
  color: red;
  font-size: 2rem;
}
.small {
  color: blue;
  font-size: 1.1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>

score 0 · Answer 4 · answered Apr 05 '17 at 14:47

You may need this:

var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev);
$(".big").removeClass('small');

Add your DIV first, and then remove the class you don't need later.

Don't worry

$(".big").removeClass('small');

would cause any problem. If there is no CLASS [small], the DOM will ignore the js.

That's all.O(∩_∩)O~

removeClass before html()

UPDATE

4 Answers4