CODEWITHSUNDEEP
jqueryhtmlcss
The Codesee
The Codesee

Reputation: 3783

Remove Text In <div>

I'm using JQUERY and CSS to edit a websites default content, however I have come across the following code:

<div id="SortOptions">
    Sort by: 
    <select id="SortMain" class="improvedcatalogdropdown">
        <option value="0" selected="selected">Relevance</option>
    </select>
</div>

I need to remove the text Sort By:, but keep the select options.

I have tried this using CSS, however it removes both the text and the select options.

#SortOptions {
    display: none;
}

Upvotes: 3

Views: 9485

Answers (3)

Liam
Liam

Reputation: 6743

Remove specific word using jQuery

var div = $('#SortOptions');
var newText = div.html().replace('Sort by:','');
div.html(newText)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="SortOptions">
    Sort by: 
    <select id="SortMain" class="improvedcatalogdropdown">
        <option value="0" selected="selected">Relevance</option>
    </select>
</div>

Upvotes: 1

Rafi
Rafi

Reputation: 824

You can remove the text completely using innerHTML and replace() in Javascript.

document.getElementById('SortOptions').innerHTML = document.getElementById('SortOptions').innerHTML.replace("Sort by:","");

Upvotes: 0

Aaron J Spetner
Aaron J Spetner

Reputation: 2155

See Hide text node in element, but not children You can set the visibility style to "hidden" for the element and override it for the children.

#SortOptions{
    visibility: hidden;
}
#SortOptions select{
    visibility: visible;
}

See https://jsfiddle.net/3u5zs5rj/

Upvotes: 4

Related Questions