Question

我希望在使用鼠标通过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>

e.g。我用鼠标突出显示'工作' 或 'orkin' （所选内容必须在 >然后点击按钮，它会显示

预期结果：

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

Answer 1

您可以使用以下内容：

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

Answer 2

您可以使用Jquery hide方法。

Answer 3

您似乎无法删除元素，隐藏所选元素而不是使用jQuery可能更有效。

Answer 4

你需要做一些额外的事情。你需要捕获document.body.onmousedown和document.body.onmouseup。如果此事件的目标是同一节点，则必须保存此节点以供进一步使用。

我为你创建了working example

通过javascript删除上一个和下一个HTML元素

4 个答案: