比方說，我有以下幾點：如何檢查跨度是否是另一跨度的父級，然後銷燬子跨度？
嗨，我的名字
<span class='green_mark'>是<span class='red_mark'>鮑勃</span>。你在做什麼</span>？
在這個例子中，green_mark已經覆蓋了red_mark的內容。是否有某種方法可以檢測跨度父母是否涵蓋跨度兒童？那麼，摧毀那個孩子的跨度？
在這種情況下，我看到.green_mark是父母，.red_mark是孩子。所以，我想.red_mark被摧毀。
注意：我在JS中做了突出顯示，但通過PHP發送數據。因此，這個解決方案可以是JS或PHP ...
試試這個：
$(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
我仍然希望這個詞本身，我只想刪除突出顯示... –
@GreatDayToday檢查更新 –
我想你可以用jQuery做到這一點。
$('span.green_mark').find('span').remove()
優秀的方法。問題是'.green_mark'並不總是父級，它可能是'.yellow_mark'。因此，我需要將此解決方案基於父級，而不是特定的跨度。同樣，孩子可以是任何顏色，不只是'.red_mark'。 –
如果你想刪除跨度標籤是直接孩子：
$(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>下面的代碼將打開那在含有_mark在他們的className所有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>
DOM是一棵樹。每個樹節點都知道它的父母/後代是什麼。因此，找到你的「red_mark」節點並開始向上移動樹 - 如果你到達頂部並且沒有找到「green_mark」，那麼它們不是嵌套的 –
@MarcB跨度是動態的，基於高亮。我不想尋找特定的跨度，因爲它們有多種顏色。我想找到父母的孩子，因爲他們可能是一個文本段落中的多個父母子女關係... –
並不重要。它仍然是一棵樹。遍歷樹來查看你的具體條件是否被滿足，並根據這個做一些事情。 –