Question

假设我有以下内容：

嗨，我的<span class='green_mark'>名称是<span class='red_mark'> Bob </span>。你是怎么做的</span>？

在此示例中，green_mark已涵盖red_mark的内容。有没有办法检测跨度父母是否覆盖跨度孩子？那么，摧毁那个孩子的跨度？

在这种情况下，我看到.green_mark是父，.red_mark是孩子。因此，我想要.red_mark被摧毁。

注意：我在JS中完成了突出显示，但是通过PHP发送数据。因此，这个解决方案可以是JS或PHP ......

Answer 1

试试这个：

$(document).ready(function() {
  $("span.green_mark>span.red_mark").each(function() {
    var elem = $(this);
    var text = elem.text();
    elem.replaceWith(text);
  });
});

或者

$(document).ready(function() {
  $("span.green_mark span.red_mark").each(function() {
    var elem = $(this);
    var text = elem.text();
    elem.replaceWith(text);
  });
});

演示：http://jsfiddle.net/GCu2D/1502/

第一个代码适用于red_mark的直接green_mark子项，而第二个代码适用于red_mark

内的任何green_mark子项

Answer 2

我猜你可以用jQuery做到这一点。

$('span.green_mark').find('span').remove()

Answer 3

如果要删除直接为子项的span标记：

$(document).ready(function(){

     $("button").on("click",function(){

         $("span").children().remove("span");

     })
})

最终代码：

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
</head>
<body>
    <span>I am Parent.<span>I am Children</span></span>
    <br><br>
    <button>Remove</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
$(document).ready(function(){
    
     $("button").on("click",function(){
         
         $("span").children().remove("span");
    
     })
})
    </script>
</body>
</html>

如果想要删除跨栏儿童，孙子，....

$(document).ready(function(){

     $("button").on("click",function(){

         $("span").find("span").remove();

     })
})

最终代码：

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
</head>
<body>
    <span>I am Parent.
        <div>I am div
            <span>I am grandChild</span>
        </div>
    </span>
    <br><br>
    <button>Remove</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
$(document).ready(function(){
    
     $("button").on("click",function(){
         
         $("span").find("span").remove();
    
     })
})
    </script>
</body>
</html>

Answer 4

以下代码将在其className中展开包含_mark in的所有span元素。无论父亲是red_mark，还是yellow_mark，rainbow_mark。

$("span[class*=_mark] span[class*=_mark]").contents().unwrap();

https://jsfiddle.net/sx07La3h/

启动HTML：

<span> Hi, my <span class='green_mark'> name is <span class='red_mark'>Bob <span class='yellow_mark'>Smith</span></span>. How are </span> you doing?</span>

结束HTML：

<span> Hi, my <span class="green_mark"> name is Bob Smith. How are </span> you doing?</span>

如何检查span是否是另一个span的父级，然后销毁子span？

4 个答案: