asked on

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

Jeffrey Dake

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

Open in new window

Something like this should work

badwolfff

ASKER

Hi,

doesn't work

Have a look:

http://www.clarktogei.jp/

thanks

badwolfff

ASKER

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

Rob

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

badwolfff

ASKER

hi

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

thanks

Rob

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

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.

badwolfff

ASKER

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

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

badwolfff

ASKER

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

Rob

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