通過javascript刪除上一個和下一個HTML元素

我想刪除使用鼠標突出顯示所選文本的JavaScript之後的前一個和下一個HTML元素，但我只知道如何獲得選定/突出顯示的文本，任何人都可以幫助我？謝謝。通過javascript刪除上一個和下一個HTML元素

function text() { 
    if (window.getSelection) 
     return window.getSelection(); 
    if (document.getSelection) 
     return document.getSelection(); 
    if (document.selection) 
     return document.selection.createRange().text; 
    return ""; 
} 

function delete_Tag() { 

    var txt = text(); 
     // txt already have the selected text 
     // I don't know how to do in here !!! 
     // I use the use the find the parentNode, but don't know how to delete the </span> 
} 

<input type='button' value='Delete Tag' onclick='delete_Tag()' /> 

<p id='text'> 
<span class="B">I am </span> 
<span class="B">working in </span> 
<span class="C">ABC company.</span> 
</p>

例如，我用鼠標突出「在工作」 OR「Orkin酒店」 （選擇必須是內）並單擊按鈕，它會顯示

預期結果：

<p id='text'> 
<span class="B">I am </span> 
working in 
<span class="C">ABC company.</span> 
</p>

來源

2011-07-19 John

如果我選擇「在ABC中工作」，預計什麼行爲？ –

@Molecule，沒有預期的行爲，但它不應該爲代碼更改。 – John

所以結果必須與「工作」相同或者沒有什麼必須改變？ –

您可以使用Jquery hide方法。

來源

2011-07-19 09:56:31 xyz

謝謝你的回答，但我想要基本的javascript，而不是jQuery和其他庫。 – John

這個問題的難點在於確定要刪除的元素，所以這沒有多大幫助。 'hide'不會*刪除*元素，這將是'刪除'。 – Quentin

@Quentin：是的，它應該是'刪除'。我在Google上查看Jquery是否有任何事件可以突出顯示文本。但約翰不想要Jquery。 – xyz

您可以使用類似以下內容：

var span = document.getElementsByClassName("B").item(0); 
     var parent = span.parentNode; 
     var sibling = span.nextSibling; 
     var textNode = document.createTextNode(span.innerHTML); 

     parent.removeChild(span); 
     parent.insertBefore(textNode, sibling);

來源

2011-07-19 10:01:10

感謝你的回答，但我不知道如何將目標應用到我的案例中，你會解釋更多嗎？ – John

我已經更新了我的答案，使用delete_tag函數而不是你的。還要手動傳遞e參數。請看看更新後的帖子。它工作嗎？ –

好吧，這是我的錯誤，我沒有看到點擊事件是爲輸入，所以e.target是一個錯誤的目標。我會在幾分鐘內更新我的例子。 –

這似乎是你有麻煩刪除元素，它可能是更有效的隱藏選定的元素，而不是使用jQuery。

來源

2011-07-19 10:20:28

你需要做一些額外的東西。你需要捕獲document.body.onmousedown和document.body.onmouseup。如果這個事件的目標是同一個節點，那麼你必須保存這個節點以備後用。

我爲您創建了working example

來源

2011-07-20 05:57:04

感謝您的回答，但是我發現您的示例在網站上無法正常工作，您想介紹一下嗎？ – John

@John，它在[jsfiddle]（http://jsfiddle.net/molecule/EFQL2/11/）中工作正常。如果我看不到您的網站代碼，我將無法提供幫助。 –

我打開工作示例，然後使用鼠標突出顯示「正在工作」，然後單擊按鈕，我做錯了什麼？ – John

通過javascript刪除上一個和下一個HTML元素

回答

相關問題