如果列表项包含''-“jQuery ()，则为.remove()？

Question

我正在重新设计一个li中的相关文章列表，我希望删除a标记和span之间的"-“，而不会干扰页面(链接)上的原始内容。我必须使用jQuery，而且我不确定是否有一种简单的方法可以做到这一点。

<div class="related-articles card">
<h3 class="h2">
    <i class="fa fa-book text-brand-primary-dark"></i> Related Articles
</h3>

<ul>

<li>
    <a href="http://example.com/article-1">Title One</a>
            - 
    <span> Some Related Preview Text... </span>
</li>
    <li>
    <a href="http://example.com/article-2">Title Two</a>
            - 
    <span> Some Related Preview Text... </span>
</li>
    <li>
    <a href="http://example.com/article-3">Title Three</a>
            - 
    <span> Some  RelatedPreview Text... </span>
</li>
</ul>

​

Answer 1

一种选择是：

$('.related-articles li a').map(function() {
    return this.nextSibling;
}).remove();

Answer 2

这是我的解决方案，获取子元素并将其分配回来，这样纯文本出现(-)就会被删除！

​

$('.related-articles li').each(function() {
  $(this).html($(this).children());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="related-articles card">
  <h3 class="h2">
    <i class="fa fa-book text-brand-primary-dark"></i> Related Articles
  </h3>

  <ul>

    <li>
      <a href="http://example.com/article-1">Title One</a> -
      <span> Some Related Preview Text... </span>
    </li>
    <li>
      <a href="http://example.com/article-2">Title Two</a> -
      <span> Some Related Preview Text... </span>
    </li>
    <li>
      <a href="http://example.com/article-3">Title Three</a> -
      <span> Some  RelatedPreview Text... </span>
    </li>
  </ul>

​

Answer 3

一种方法是循环遍历每个<li>，提取<a>和<span>元素并手工将它们缝合在一起，如下所示：

​

$("ul > li").each( (i, li) => {
    const $li = $(li);
    const $a = $li.find("a");
    const $span = $li.find("span");
    
    //create a temp element with just the <a> and <span>
    const $tempItem = $("<li></li>");    
    $tempItem.append( $a ).append( $span );
    //copy new HTML into old element
    $li.html( $tempItem.html () );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>

<li>
    <a href="http://example.com/article-1">Title One</a>
            - 
    <span> Some Related Preview Text... </span>
</li>
    <li>
    <a href="http://example.com/article-2">Title Two</a>
            - 
    <span> Some Related Preview Text... </span>
</li>
    <li>
    <a href="http://example.com/article-3">Title Three</a>
            - 
    <span> Some  RelatedPreview Text... </span>
</li>
</ul>

​