I have the following html:

<p>This is some random text in a paragraph with a <span class="blue">blue</span> word.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <i>word</i>.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <span class="blue">word</span>.</p>

My CSS is as follows:

.blue{
  color:blue;
}
.popup{
  background-color:lightblue;
}

And finally my JS:

var popup = false;
$(".blue").click(function(){
  if (!popup){
    $(this).after("<div class='popup'>This is some popup text</div>");
    popup = true;
  }
  else{
    $(".popup").remove();
    popup = false;
  }
});

Now my problem, when I call the remove function on my popup class it removes whitespace between tags As explained in some answers below, the after function could also be causing this. . eg:

<span class="blue">blue</span> <i>word</i>

becomes

<span class="blue">blue</span><i>word</i>

It does not do this when the text following a blue class is not in tags eg:

<span class="blue">blue</span> word

Why does this happen and how can I prevent it?

For further reference here is a fiddle: /

Edit: It seems this problem is localized to Chrome as it does not occur in FF or IE.

I have the following html:

<p>This is some random text in a paragraph with a <span class="blue">blue</span> word.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <i>word</i>.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <span class="blue">word</span>.</p>

My CSS is as follows:

.blue{
  color:blue;
}
.popup{
  background-color:lightblue;
}

And finally my JS:

var popup = false;
$(".blue").click(function(){
  if (!popup){
    $(this).after("<div class='popup'>This is some popup text</div>");
    popup = true;
  }
  else{
    $(".popup").remove();
    popup = false;
  }
});

Now my problem, when I call the remove function on my popup class it removes whitespace between tags As explained in some answers below, the after function could also be causing this. . eg:

<span class="blue">blue</span> <i>word</i>

becomes

<span class="blue">blue</span><i>word</i>

It does not do this when the text following a blue class is not in tags eg:

<span class="blue">blue</span> word

Why does this happen and how can I prevent it?

For further reference here is a fiddle: http://jsfiddle.net/6fqDq/

Edit: It seems this problem is localized to Chrome as it does not occur in FF or IE.

• javascript
• jquery
• html
• google-chrome

• 4 Why the whitespace is so important to you? – fracz Commented Jun 10, 2014 at 14:02
• 12 @WojciechFrącz Because "some thing" and "something" are not equivalent. – Etheryte Commented Jun 10, 2014 at 14:03
• 1 The white space is important as I have a red class as well and sometimes a red word and a blue word comes next to each other. They should have the space or else it becomes one word. – Morne Commented Jun 10, 2014 at 14:05
• 1 I'm pretty sure this isn't a jQuery problem. If you look in Dev Tools, the DOM doesn't change around the .popup before and after the .remove() call; it almost looks like the space is never there. .append() "works" because it's doing something totally different - it doesn't affect the surrounding DOM – Ian Commented Jun 10, 2014 at 14:24
• 2 I see the question was voted to be closed as off-topic, due to "a problem that can no longer be reproduced or a simple typographical error". I do not think this is the case as it can be reproduced easily and it is definitely not a typo that caused the problem – Morne Commented Jun 10, 2014 at 14:39

6 Answers 6

The reason this is happening is because you added a block element(div), the block element breaks into a new line, then when it's removed, it takes away the whitespace with it that's after it, because for HTML a whitespace and a newline is pretty much the same.

You have several solutions, some were mentioned here :

1. Use &nbsp
2. Put a space inside the <i> tag instead of between tags, so <i> word</i> would work fine.
3. Use a <span> tag instead of a div tag on the after.

I don't think the problem is with remove but with after in this case which probably ignore text node and therefore ignoring the white space. If you use append, also it does place the element somewhere else the problem disappear.

http://jsfiddle.net/6fqDq/8/

var popup = false;
$(".blue").click(function() {
    if (!popup) {
        $(this).append("<div class='popup'>This is some popup text</div>");
        popup = true;
    } else{
        $(".popup").remove();
        popup = false;
    }
});

Not sure why it does it. But a quick fix would be to put the white space within the <i> tag. Like this:

<p>This is some random text in a paragraph with a <span class="blue">blue</span><i> word</i>.</p>

See http://jsfiddle.net/6fqDq/5/

just add  

<p>This is some random text in a paragraph with a <span class="blue">blue</span>&nbsp;<span class="blue">word</span>.</p>

Use .append instead of .after()

if (!popup){
    $(this).append("<div class='popup'>This is some popup text</div>");
    popup = true;
}

I can't explain why it doesn't work with .after, but i think it could be appending on the whitespace

DEMO

Not sure why it is happening, but maybe replace your spaces with entities?   is a space. You could do it with javascript str.replace('> <', '>&nbsp;<' ) or in php str_replace('> <', '>&nbsp;<', str)