刪除嵌套文本正確使用jQuery

我有在HTML頁面中的多個幾乎相同跨度刪除嵌套文本正確使用jQuery

<span class="title">   
<span class="icon icon-title" title="Title">Title:</span> 
<a href="LINK_HERE">PAGE_TITLE_HERE</a> remove this 
</span>

有幾個這樣的頁中的div和李的相同類的，唯一結束該不同的是LINK_HERE和PAGE_TITLE_HERE。

我需要做的是從span中刪除"remove this"文本。我設法做的是一個笨拙的替代解決方案，它看起來是這樣的：

('div.content').html($('div.content').html().replace(/remove this/g,' '))

我不是這正是快樂的，因爲它取代了頁面上的話所有出現，並導致與其它代碼存在一定的問題。如果我將div.content限制爲.title，奇怪的事情就會發生 - 上述跨度的所有事件都會成爲第一次出現的副本。即

1 remove this 
2 remove this 
3 remove this

變成

1 
1 
1

任何人都可以提出一個更好的解決方案，以取代刪除或隱藏「刪除此」的文字，也許，使用.slice或.trim或卸下襬臂或組合那些？

在此先感謝。

來源

2012-10-31 Easy Life

你的HTML結構是不妥當的，我認爲。 – freebird

我編輯了你的問題，使其更容易看到結構，但我可能已經改變了範圍，因爲你似乎嚴重依賴於替換中的文本節點。我強烈建議你在一些容器中包裝文本並移除容器 – mplungjan

你的代碼工作正常，至少在這裏http://jsfiddle.net/LCUea/3/ –

最簡單的方法是隻刪除的span.title最後一個孩子，因爲你知道這就是你想要的文字是

http://jsfiddle.net/LCUea/2/

$('span.title').each(function(){ 
    this.removeChild(this.lastChild); 
});

來源

2012-10-31 06:39:50

感謝您的建議，我會嘗試一下。至於重組html，如果可能的話，這將是我的第一選擇。不幸的是，它是通過頁面渲染插件插入html頁面的，所以它是我無法接觸的。 –

@EasyLife我沒有建議你應該重構你的HTML。此代碼嚴重依賴於HTML的結構。重組HTML更語義有很多好處（需要與重組較少的變化），但不理解你爲什麼這樣做，我更願意只回答這個問題，這是很簡單的 –

我知道你沒有。我已經嘗試過您的移除子解決方案，它的工作方式就像一個奇蹟。由於實際的文本並不以「this」結尾，但可以說「它」，首先我很笨，將this.removeChild改爲it.removeChild。 :)）無論如何，它就像一個魅力，我真的不能相信，我沒有與代碼亂了或manualy替換「刪除」將其粘貼到一個文本文件後（該頁面是一個報表生成器各種各樣的）。所以我真的非常感謝你的幫助Juan，並且一旦得到足夠的代表，我會立即投票！對於其他人，感謝您的意見，欣賞這一點。 –

如果要從元素中刪除文本，可以使用contents和filter方法。

$('span.title').contents().filter(function(i){ 
    if (this.nodeType === 3) { 
     $(this).remove() 
    } 
})

http://jsfiddle.net/LCUea/

來源

2012-10-31 06:33:50 undefined

您是否認爲html結構可以在問題中得到改進？ – freebird

@freebird那麼，嵌套跨度元素不是構建標記的好方法，我不確定OP想要實現什麼。 – undefined

我重構了html http：// jsfiddle。net/rEQJv /這會好嗎？ – freebird

如果」只關注劇本，那麼你可以這樣使用它：

$('span.title').each(function(){ 
    $(this).html($(this).html().replace(/remove this/g,' ')); 
});

UPDATE：工作演示在這裏：http://jsfiddle.net/LCUea/4/

現在將刪除跨度「.title僞」展開元素的所有的發生，不考慮具體的文字。

$('span.title').each(function(){ 
    //$(this).html($(this).html().replace(/remove this/g,' ')); 
    var html = ''; 
    $(this).children().each(function(){ 
     html += $(this).outerHTML(); 
    }); 
    $(this).html(html); 
});

來源

2012-10-31 06:47:10

這將替換HTML，這並不需要被更換之前，它幾乎相同破解OP建議 –

的問題說，整個頁面上替換這段文字結束對頁面進行奇怪的更改。這樣至少可以縮小更換範圍。 –

我只是指出它仍然hackish的，有兩個已經在這裏 –

刪除嵌套文本正確使用jQuery

回答

相關問題