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?
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
0
badwolfffAuthor Commented:
Hi,

doesn't work

Have a look:

http://www.clarktogei.jp/

thanks
0
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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

0
badwolfffAuthor Commented:
hi

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

thanks
0
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

0
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.
0
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...
0
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

0

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
0
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
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.