Question

我正在使用的CMS会自动吐出一个替代样式的标记，我想从DOM中删除它。这是HTML：

<div class="recent-blog-posts-wrapper">

<ul>

<li class="widget-alternate-item tag-Middle-Tennessee-SE">

<div class="tag-wrapper">
<a class="tag">widget alternate item</a>
<a class="tag">Middle Tennessee SE</a>
</div> 

</li>            
</ul>

我想只删除包含内容“widget alternate item”的第一个标记，同时保留组中的其他标记。 “窗口小部件备用项”仅出现在交替列表项上，因此:: first伪类将不起作用。

以下脚本不会引发错误，但也不会删除该项目。使用下划线与内容词之间的空格无效;我已经尝试过两种方式。

<script type="text/javascript">
     $(document).ready(function () {                
        $('.recent-blog-posts-wrapper li .tag-wrapper a.tag:contains("widget_alternate_item")').empty();
         })
</script>

Answer 1

您需要使用css :eq()或jquery .eq()和jquery .remove()

<script type="text/javascript">
     $(document).ready(function () {                
        $('.recent-blog-posts-wrapper li .tag-wrapper a.tag:contains("widget alternate item"):eq(0)').remove();
         })
</script>

＆＃13;

$(document).ready(function () {                
    $('.recent-blog-posts-wrapper li .tag-wrapper a.tag:contains("widget alternate item"):eq(0)').remove();
});

＆＃13;

a{
  display : block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="recent-blog-posts-wrapper">
  <ul>
    <li class="widget-alternate-item tag-Middle-Tennessee-SE">
      <div class="tag-wrapper">
        <a class="tag">widget alternate item</a>
        <a class="tag">Middle Tennessee SE</a>
        <a class="tag">widget item</a>
        <a class="tag">widget alternate item</a>
      </div> 
    </li>            
  </ul>
</div>

＆＃13;

其他：如果您有更多li s，则需要使用.filter()

＆＃13;

$(document).ready(function () {                
    $('.recent-blog-posts-wrapper li .tag-wrapper a.tag:contains("widget alternate item")').filter(function(){ return $(this).index() == 0}).remove();
});

＆＃13;

a{
  display : block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="recent-blog-posts-wrapper">
  <ul>
    <li class="widget-alternate-item tag-Middle-Tennessee-SE">
      <div class="tag-wrapper">
        <a class="tag">widget alternate item</a>
        <a class="tag">Middle Tennessee SE</a>
        <a class="tag">widget alternate item</a>
        <a class="tag">widget alternate item</a>
      </div> 
    </li>
    <li class="widget-alternate-item tag-Middle-Tennessee-SE">
      <div class="tag-wrapper">
        <a class="tag">widget alternate item</a>
        <a class="tag">Middle Tennessee SE</a>
        <a class="tag">widget alternate item</a>
        <a class="tag">widget alternate item</a>
      </div> 
    </li>     
  </ul>
</div>

＆＃13;

注意：如果您的元素是.filter()代码将无法正常工作不是tag-wrapper
的第一个孩子

Answer 2

Mohamed-Yousef的解决方案正在运行，但如果由于某种原因，您的widget alternate item不是列表中的第一个，会发生什么？如果内容比位置更重要，那么最好使用.each()和.text() ......

$(function () {  
  $('.tag', '.recent-blog-posts-wrapper').each(function () {
    var $this = $(this);
    if ($this.text() === 'widget alternate item') {
      $this.remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="recent-blog-posts-wrapper">
  <ul>
    <li class="widget-alternate-item tag-Middle-Tennessee-SE">
      <div class="tag-wrapper">
        <a class="tag">widget alternate item</a>
        <a class="tag">Middle Tennessee SE</a>
      </div> 
    </li>            
  </ul>
</div>

如何使用jQuery通过列表项中的内容删除项目

2 个答案: