使用jquery删除两个span之间的内容

Question

这是我的HTML代码

<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>

我想删除两个范围之间的内容>>。

我该怎么做？

我试过这个

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

即，向href迭代并识别"Go to Products."并添加了一个隐藏第二个跨度的类turnoffmain。

但是如何删除这两个跨度之间的>>？

Answer 1

您可以在HttpMethodName和contents()

的帮助下执行此类操作

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>代码

之间更具体的删除元素

span

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

之上，则删除内容

turnoffmain

$('.breadcrumbs').contents().each(function() {
  console.log(this.nextSibling.nodeName == 'SPAN');

  if (this.nodeType == 3 && $(this.nextSibling).is('.turnoffmain'))
    this.remove();
});

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)

基本示例;