jQuery si l'élément de liste contient '' - ".remove()?

Question

Je restyling une liste d'articles liés dans un li et je voudrais enlever le" - "entre l'étiquette et l'envergure sans jouer avec le contenu original . sur la page (liens) Je dois utiliser jQuery et je ne sais pas s'il y a un moyen simple de le faire

<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

une option est:.

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

Answer 2

ici est ma solution, obtenir les éléments enfants et l'assigner , de sorte que le texte brut présent (-) sera supprimé!

$('.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

Une manière serait de boucle à travers chaque <li>, extraire les <a> et <span> éléments et les assembler à la main, comme ceci:

$("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>