CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nobunaga
Nobunaga

Reputation: 95

How can I remove all text after the last <li> of every <ul>?

I have a menu with their submenus too. After the page loads.. The website generates random texts after every end of submenus..

enter image description here

This is the current markup that is generated from firebug:

<nav class="shopMenuHover">
    <div id="bx_incl_area_5_1"> 
        <ul> 
            <li><a href="#" >First Menu</a>
            <div class="" style=""><h2><a href="#">First Sub Menu</a></h2>
                <ul> 
                    <li>
                        <a href="">Sub Menu &gt; Sub Menu</a>
                    </li>

                    <li><a href="">Sub Menu &gt; Sub Menu</a> 90797</li>
                </ul>
            </div>
        </li>


        <li class="firstLevel hasSubmenu instrumentarium-en-fresen">
        <a href="#" class="firstLevel">Second Menu</a>

        <div><h2><a href="">Second Menu</h2>
            <ul>
                <li><a href=""><font><font>Sub Menu &gt; Sub Menu</a></li>
                <li><a href="">Sub Menu &gt; Sub Menu</a> 896346</li>
            </ul>

        </div>
        </li>

        </ul>
    </div>
</nav>

Problem: The texts 90797 and 896346 are texts generated randomly by the website. How can I remove these texts after every last li > a inside every ul?

This is the current jquery i used to select only the text inside a tag:

<script type="text/javascript">
$(document).ready(function() {
$(".shopMenuHover ul li:last-child > a").css( "border", "2px solid red");
});
</script>

Output: Remove all texts after a tag of every last li-last-child..

Please Help Me...

Upvotes: 2

Views: 393

Answers (3)

web-tiki
web-tiki

Reputation: 103760

Here is a way to do this with CSS using the visibility property :

DEMO

.shopMenuHover ul li:last-child{
    visibility:hidden;
}
.shopMenuHover ul li:last-child > *{
    visibility:visible;
}

note : use the * selector so it works even if the <li> contains something else than a link.

Upvotes: 1

James Montagne
James Montagne

Reputation: 78630

Another option would be to set the html of the li to just the a.

$(".shopMenuHover ul li:last-child").each(function(){
    var $this = $(this);
    $this.html($this.children("a"));
});

http://jsfiddle.net/ujrp151h/1/

This would also clear anything else within the element other than the a, not just text nodes.

Upvotes: 0

adeneo
adeneo

Reputation: 318182

You can select all the nodes, including the textnodes, with contents(), then use filter() to get just the textnodes outside the anchors, and remove them

$(".shopMenuHover ul li:last-child").contents().filter(function() {
    return this.nodeType === 3;
}).remove();

FIDDLE

Upvotes: 11

Related Questions