使用jQuery删除两个范围之间的内容

Question

Here is my HTML Code

<div class="breadcrumbs">
    <span typeof="v:Breadcrumb">
    <a title="Go to Innomations." href="" class="home">Home</a></span>
    >>
    <span typeof="v:Breadcrumb" class="turnoffmain">
    <a rel="v:url" property="v:title" title="Go to Products." href="">Products</a></span> 
</div>

I want to remove the content >> between two span.

How can i do this ?

I tried like this

$("a").each(function(){
   if($(this).attr("title") == "Go to Products."){
      $(this).closest('span').addClass('turnoffmain');
    } 

ie, iterated towards a href and identified the "Go to Products." and added a class turnoffmain which will hide the second span.

But how can i remove the >> between those two spans ?

Answer 1

You can do something like this with the help of contents() and each()

 $('.breadcrumbs').contents().each(function() { if (this.nodeType == 3) this.remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="breadcrumbs"> <span typeof="v:Breadcrumb"> <a title="Go to Innomations." href="" class="home">Home</a></span> >> <span typeof="v:Breadcrumb" class="turnoffmain"> <a rel="v:url" property="v:title" title="Go to Products." href="">Products</a></span> </div> 

Or more specific removing element between span tag

 $('.breadcrumbs').contents().each(function() { console.log(this.nextSibling.nodeName == 'SPAN'); if (this.nodeType == 3 && this.nextSibling && this.prevSibling && this.nextSibling.nodeName == 'SPAN' && this.prevSibling.nodeName == 'SPAN') this.remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="breadcrumbs"> <span typeof="v:Breadcrumb"> <a title="Go to Innomations." href="" class="home">Home</a></span> >> <span typeof="v:Breadcrumb" class="turnoffmain"> <a rel="v:url" property="v:title" title="Go to Products." href="">Products</a></span> </div> 

Or as you said removing content if it is above the class turnoffmain

 $('.breadcrumbs').contents().each(function() { console.log(this.nextSibling.nodeName == 'SPAN'); if (this.nodeType == 3 && $(this.nextSibling).is('.turnoffmain')) this.remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="breadcrumbs"> <span typeof="v:Breadcrumb"> <a title="Go to Innomations." href="" class="home">Home</a></span> >> <span typeof="v:Breadcrumb" class="turnoffmain"> <a rel="v:url" property="v:title" title="Go to Products." href="">Products</a></span> </div> 

Answer 2

var a = '<div class="breadcrumbs"><span typeof="v:Breadcrumb">    <a title="Go to Innomations." href="" class="home">Home</a></span> >> <span typeof="v:Breadcrumb" class="turnoffmain"><a rel="v:url" property="v:title" title="Go to Products."href="">Products</a></span> </div>';

var str = a;
str = str.replace(">>", "");
alert(a)

Basic example;