删除 <div> 中的文本答案

【问题标题】：Remove Text In <div>删除 <div> 中的文本
【发布时间】：2016-04-22 14:44:15
【问题描述】：

我正在使用 JQUERY 和 CSS 来编辑网站的默认内容，但是我遇到了以下代码：

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

我需要删除文本 Sort By:，但保留选择选项。

我已经尝试过使用 CSS，但是它同时删除了文本和选择选项。

#SortOptions {
    display: none;
}

【问题讨论】：

为什么不直接删除文本“排序方式：”...？真的不需要CSS。如果你隐藏整个div，你也会隐藏嵌套在其中的select。
正如我在第一句话中提到的，我正在使用 jquery 和 css 来覆盖网站的默认 html - 我无法访问该网站的默认代码。

标签： jquery html css

【解决方案1】：

见Hide text node in element, but not children 您可以将元素的可见性样式设置为“隐藏”，并为子元素覆盖它。

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

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

【讨论】：

【解决方案2】：

您可以在 Javascript 中使用 innerHTML 和 replace() 完全删除文本。

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

【讨论】：

【解决方案3】：

使用 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>

【讨论】：