删除<h3>的文字内容

时间:2015-06-12 13:25:43

标签: javascript jquery html-heading

我正在尝试从标题列表中删除“h3”标记,并按文本选择它。 例如,如果我有:

HTML:

<h3>NO CHANGE</h3>
<h3>h3 to be removed</h3>
<h3>NO CHANGE</h3>
<h3>NO CHANGE</h3>
<h3>NO CHANGE</h3>

jQuery的:

var h3_text_remove = $('h3').text();
if (h3_text_remove == 'h3 to be removed'){
    $('h3').remove();
//console.log (h3_text_remove);
}

如何删除标题为'h3'的标题?

小提琴: http://jsfiddle.net/q2nb08t6/7/

5 个答案:

答案 0 :(得分:4)

您可以使用 contains() 选择器

$("h3:contains('h3 to be removed')").remove();

<强> Fiddle

答案 1 :(得分:4)

使用:

//If text can have leading or trailing spaces
$('h3').filter(function() {
    return $(this).text().trim() == 'h3 to be removed';
}).remove();

//or if the text should match exactly:
$('h3').filter(function() {
    return $(this).text() == 'h3 to be removed';
}).remove();

DEMO 1

$('h3').filter(function() {
    return $(this).text().trim() == 'h3 to be removed';
})
.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>NO CHANGE</h3>
<h3>h3 to be removed</h3>
<h3>NO CHANGE</h3>
<h3>NO CHANGE</h3>
<h3>NO CHANGE</h3>
<h3>h3 to be removed </h3>
<h3> h3 to be removed</h3>
<h3>h3 to be removed xx</h3>

DEMO 2

答案 2 :(得分:1)

您可以使用:contains()选择器在一行中执行此操作:

$('h3:contains("h3 to be removed")').remove();

或使用变量:

var h3_text_remove = $('#specificH3').text();
$('h3:contains("' + h3_text_remove + '")').remove();

请注意,这将以任何方式删除包含该文本的所有h3元素,因此将删除以下两项内容:

<h3>h3 to be removed</h3>
<h3>foo h3 to be removed bar</h3>

要将其限制为仅包含整个文字的元素,请使用filter()

$('h3').filter(function() {
    return $(this).text() == 'h3 to be removed';
}).remove()

答案 3 :(得分:1)

您可以使用此解决方案:轻松理解的基本解决方案。

小提琴:http://jsfiddle.net/q2nb08t6/10/

$('h3').each(function(){
var h3_text_remove = $(this).text().trim();

if (h3_text_remove == 'h3 to be removed'){
    $(this).remove();
}
});

答案 4 :(得分:1)

如果您只想删除标记而不是内容

$('h3').each(function(){
    var h3_text_remove = $(this).text().trim();

    if (h3_text_remove == 'h3 to be removed'){
        $(this).unwrap();
    }
});