How can I remove content like   from an element?

Question

I have a div where the content looks like this:

<div class="container">
    &nbsp;
    <div class="eventSpot bg-blue"></div>
    <div class="eventSpot bg-blue"></div>
    <div class="eventSpot bg-red"></div>
</div>

The   is causing some styling problems so I need to remove it.

How can I remove just that part of the content with jQuery/javascript?

Answer 1

Using jQuery:

var div = $('div.container');
div.html(div.html().replace(/^\s* /m, ''));

Answer 2

I prefer working with nodes instead of html as a string if possible, so I would suggest something like this:

http://jsfiddle.net/p7v89/

$('.container').contents().filter(function() {
    return this.nodeType == 3
}).remove();

That will find all text nodes and remove them.

Answer 3

You could alternatively try the .detach() method.

var $data = $('.container > div').detach();
$('.container').empty().html($data);

Answer 4

you will get the text without HTML tag and &nbsp etc

This is a solution for HTML tag and &nbsp etc and you can remove and add conditions

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, ' ');
}