Removing text that was appended previously

Question

I have a highlighting function using JQuery, that changes the css for the clicked <li> element in a menu. The function also prepends a pair of left brackets << to serve as pseudo arrows.

But how do I remove that << when I switch to the next <li> ?

$(".sdv-nrml").click(function(){

//remove old highlighted li 
$(".sdv-nrml").css({'background' : '#ffcc66' , 'color' : '#000000' , 'text-align' : 'right'});

//assign new css and prepend arrow
$(this).css({'background' : '#996600' , 'color' : '#ffff66' , 'text-align' : 'left'});
$(this).prepend("<< ");
});

Thanks

Epigraph

Answer 1

I would include the << in a <span>:

$(this).prepend('<span class="prepended">&laquo; </span');

then to remove:

$(".prepended").remove();

Note: I used « instead of <<. I find it a little more appealing.

Moir

note: minor error. class was named "prependED" referred to as .prepend great solution though, exactly what I was looking for – Phantasm

Answer 2

Wrap it in a span with a class and remove that.

$(this).prepend('<span class="pseudo-arrow">&lt;&lt;</span>');

Pharsalus

Answer 3

why you don user a class for the selected state? .selected-item { background: #ffcc66; color: #000; text-align:right; }

So your script can be used like that:

$(".sdv-nrml").click(function(){

    //remove old highlighted li
    $(".sdv-nrml").each(function(){
        $(this).removeClass("selected arrow");
    });

    //assign new css and prepend arrow
    $(this).addClass("selected");
    $(this).prepend("<span class='arrow'>&lt;&lt;</span> ");
});

Droshky