リスト項目に " - "が含まれている場合.remove（）？

Question

私はliで関連する記事のリストを作り直しています。元の内容を乱さずにタグとスパンの間の " - "を削除したいと思います。ページ（リンク）に私は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>