How do I use jQuery to remove a text string from a div without touching any other element?

Hi,

I have the following WordPress generated HTML:

<aside id="footer_bar" class="row">
            <div align="center">VISITS RECEIVED &nbsp;&nbsp;<span id="counter"></span> 
<script language="JavaScript" type="text/javascript" src="http://img.vermessen.net/instcounter/ee.js"></script> 
<script>var style="margin:0px; display:inline; border:0px;";
var reload=15;
var id=87331
;
var vornullen=0;
var alterstand=0;
var staturl="http://www.clarktogei.jp/wp-content/plugins/counter/showstat.php";
var marker="1419202359";
var design="z1";var lang="WPLANG";ee();</script><span id="counterajndanuiwa"><span class="zzmain"><a target="_blank" href="http://wpcount.appspot.com/WPLANG/0/0/stats-87331.html"><img style="margin: 0px;padding: 0px; border:0px;" width="10" height="15" class="cicon z8" src="http://www.gstatic.com/news/img/cleardot.gif"><img style="margin: 0px;padding: 0px; border:0px;" width="10" height="15" class="cicon z8" src="http://www.gstatic.com/news/img/cleardot.gif"><img style="margin: 0px;padding: 0px; border:0px;" width="10" height="15" class="cicon z4" src="http://www.gstatic.com/news/img/cleardot.gif"></a></span></span><script type="text/javascript">welcomeinit();</script> <noscript>&lt;a href="http://www.sorben.org/counter/"&gt;&lt;img border="0" src="http://img.vermessen.net/instcounter/keiner.png"&gt;&lt;/a&gt;</noscript> </div>        </aside>

Open in new window



From this code I would like to use jQuery to remove the following string in realtime
VISITS RECEIVED &nbsp;&nbsp;

Open in new window


Of course I would like the rest of the content to remain untouched.

Any help would be appreciated.

thanks in advance
badwolfffAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jeffrey Dake Senior Director of TechnologyCommented:
var html = $(#footer_bar > div).val();
html.replace('VISITS RECEIVED', '');
$(#footer_bar > div).val(html);

Open in new window


Something like this should work
badwolfffAuthor Commented:
Hi,

doesn't work

Have a look:

http://www.clarktogei.jp/

thanks
badwolfffAuthor Commented:
By the way I changed the code just a little bit:

var html = jQuery("#footer_bar > div").val();
html.replace('VISITS RECEIVED', '');
jQuery("#footer_bar > div").val(html);

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

RobOwner (Aidellio)Commented:
Change it slightly as you should use either the html() or text() functions as val() is only relevant for form elements.
Also the replace() function returns the replaced string, it doesn't update it directly.

var html = jQuery("#footer_bar > div").val();
html = html.replace('VISITS RECEIVED', '');
jQuery("#footer_bar > div").html(html);

Open in new window

badwolfffAuthor Commented:
hi

doesn;t work
if I do that all the content in the div gets wiped
try it yourself on fiddle

thanks
RobOwner (Aidellio)Commented:
sorry! need to follow my own advice... i've accidently left the .val() in the first line of code:

so  change to this:
var html = jQuery("#footer_bar > div").html();
html = html.replace('VISITS RECEIVED', '');
jQuery("#footer_bar > div").html(html);

Open in new window

Jeffrey Dake Senior Director of TechnologyCommented:
Did you change the top line to html as well?  I notice rob forgot to change that one.

var html = $("#footer_bar > div").html();

Open in new window


This should grab the html in that container. We then do a search and replace on the string and put the new html back in. You will want to make sure that this function is executed after the footer_bar is rendered, so make sure the JavaScript is at the end of your page.

Hope this works. Sorry I confused Val and html function. My brain said html and my fingers typed Val. Anyways, hope this solves your problem.
badwolfffAuthor Commented:
Hi Guys, tried the lot, even changing the first line as Jeffrey suggested. Does not work. If I do that, the whole page gets wiped out and I only see a part of the html.
hmmm...
RobOwner (Aidellio)Commented:
bit of a strange one given the inline script going on.  This however removes everything except for the counter:

var counter = jQuery('span[id=counterajndanuiwa]');
jQuery('#footer_bar > div').empty()
for (i=0; i<counter.length; i++) {
    jQuery('#footer_bar > div').append(counter[i]);
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
badwolfffAuthor Commented:
Thanks Rob,
your idea won't work because if I remove the script then the counter will show but not work.

hmmm bit of an odd one. Just a thought, maybe I could set font-size to 0 and colour the same as bg and realign the whole div to center via css? It might just work

thanks
RobOwner (Aidellio)Commented:
So the counter will show a live update without the user having to refresh the page?  If that's the case then I can understand that my suggestion wouldn't work but if the counter only updates on each page refresh then my solution will work because the counter's scripts are executed before the text is removed.

I can see that setting the font-size: 0 does "remove" the text (I like that one).  From what I can see the text is automatically centred.  The issue is that Safari doesn't like that and still reserves space for the "missing" text
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.