如何删除文本节点?

时间:2015-01-21 19:21:48

标签: javascript jquery html

请帮助删除文本节点“Бесплатно!”。

这是我对jsfiddle的尝试。问题是我只删除了第一个节点,但其他节点仍然是

以下是简化代码:

<ul class="product_list_widget">
    <li>
        <a href="http://qqq.ru/shop/granit/104/" title="qqq">
            <img width="90" height="90" src="http://qqq.ru/wp-content/uploads/2013/08/104-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="104">
            qqq                 
        </a> 

        <div class="star-rating" title="Рейтинг 3.50 из 5">
            <span style="width:70%">
                <strong class="rating">3.50</strong> из 5</span>
                <b class="rate_content">Рейтинг 3.50 из 5</b>
        </div>deleteNode
    </li>

    ......
    ......
    ......
    ......
</ul>


<script>
// priceless hide
document.querySelector('.star-rating').parentNode.removeChild( document.querySelector('.star-rating').nextSibling );
</script>

4 个答案:

答案 0 :(得分:0)

document.querySelector('.star-rating')

只会为您提供第一个匹配的节点

您应该使用document.querySelectorAll,它将返回节点列表

var x = document.querySelectorAll('.star-rating');
for(var i in x){
    x[i].parentNode.removeChild( x[i].nextSibling );
}

答案 1 :(得分:0)

如果您要删除包含“Бесплатно!”的所有元素,使用jQuery(你的意思是文本节点吗?)然后你可以使用jQuery :contains选择器来找到这些元素,并删除它们:

$("li:contains('Бесплатно!')").remove();

这是一个JSFiddle来证明这一点。

如果您不想删除整个节点(从您的问题中不太清楚),那么$("li:contains('Бесплатно!')")是一个jQuery对象,其中包含您要从中删除元素的子元素的所有元素。这样可以更轻松地找到合适的<li>子项并将其从DOM中删除。

答案 2 :(得分:0)

你的“Бесплатно!”文本本身不在元素中。它在li元素下,并且我想象中删除该元素是不可取的。您可以操纵其innerHTML以删除该文本。

var li = document.querySelectorAll('li');
for (i = 0; i < li.length; i++) {
  li[i].innerHTML = li[i].innerHTML.replace("Бесплатно!", "");
}
<ul class="product_list_widget">
  <li>
    <a href="http://plastushka.ru/shop/granit/103/" title="Мансуровский">
      <img width="90" height="90" src="http://plastushka.ru/wp-content/uploads/2013/08/1031-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="103" />Мансуровский
    </a>
    <div class="star-rating" title="Рейтинг 5.00 из 5"><span style="width:100%"><strong class="rating">5.00</strong> из 5</span><b class="rate_content">Рейтинг 5.00 из 5</b>

    </div>Бесплатно!</li>
  <li>
    <a href="http://plastushka.ru/shop/granit/193/" title="Сахара">
      <img width="90" height="90" src="http://plastushka.ru/wp-content/uploads/2013/08/193-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="193">Сахара</a>
    <div class="star-rating" title="Рейтинг 5.00 из 5"><span style="width:100%"><strong class="rating">5.00</strong> из 5</span><b class="rate_content">Рейтинг 5.00 из 5</b>

    </div>Бесплатно!</li>
  <li>
    <a href="http://plastushka.ru/shop/granit/215/" title="Южно-Султаевский">
      <img width="90" height="90" src="http://plastushka.ru/wp-content/uploads/2013/08/215-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="215">Южно-Султаевский</a>
    <div class="star-rating" title="Рейтинг 4.67 из 5"><span style="width:93.4%"><strong class="rating">4.67</strong> из 5</span><b class="rate_content">Рейтинг 4.67 из 5</b>

    </div>Бесплатно!</li>
  <li>
    <a href="http://plastushka.ru/shop/granit/287/" title="Жельтау-5">
      <img width="90" height="90" src="http://plastushka.ru/wp-content/uploads/2013/08/287-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="287">Жельтау-5</a>
    <div class="star-rating" title="Рейтинг 4.50 из 5"><span style="width:90%"><strong class="rating">4.50</strong> из 5</span><b class="rate_content">Рейтинг 4.50 из 5</b>

    </div>Бесплатно!</li>
  <li>
    <a href="http://plastushka.ru/shop/granit/104/" title="Камбулатовский">
      <img width="90" height="90" src="http://plastushka.ru/wp-content/uploads/2013/08/104-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="104">Камбулатовский</a>
    <div class="star-rating" title="Рейтинг 3.50 из 5"><span style="width:70%"><strong class="rating">3.50</strong> из 5</span><b class="rate_content">Рейтинг 3.50 из 5</b>

    </div>Бесплатно!</li>
</ul>

答案 3 :(得分:-1)

将一些id设置为该点头并将其删除 $(&#34;#that-nod-id&#34;)。remove();