Question

我希望能够从x个元素中删除一个类。我目前使用的元素是标签。在任何给定时间，文档上都可以有无限量的标签，因为在不同的div中，用户可以创建链接。这使我无法使用特定的ID。但我希望在任何给定时间只突出显示一个标签。但是，我只看到了如何使用JQuery，我无法使用它。我看到了一个使用Javascript的不同示例，但这是针对固定大小的数组。

这是我的突出显示类的代码：

<DOCTYPE html>
<html>
   <head>
<style>
    .selected{border:dotted 2px;border-color:gray;}
</style>
</head>
<body>
<div id='linkEditDiv'>
         <form name='linkEditor'>
           <table>
             <input type="hidden" name='linkId'>
             <tr><th>Label:</th><td> <input type='text'  name='label'></td></tr>
             <tr><th>Link:</th><td> <input type='text' name='link'></td></tr>
             <tr><th></th><td><input type="button" onclick='submitForm()' value="OK" ><input type="button" onclick='cancel()' value="Cancel" ></td></tr>
            </table>
         </form>
      </div>
    <a href='#' onclick='edit("lr1")' id='lr1'>link1</a>
 <a href='#' onclick='edit("lr2")' id='lr2'>link1</a>
 <a href='#' onclick='edit("lr3")' id='lr3'>link1</a>
</body>
</html>

这是添加突出显示的JavaScript：

 function edit(link)
    {

        var elems = document.getElementsByClassName('selected');
        for (var i = 0; i < elems.length; i++) {
    elems[i].className = elems[i].className.replace('selected', '')
}
        document.getElementById(link).className += "selected"
    }

这是我尝试过的JavaScript：

    var id=document.forms['linkEditor'].elements['linkId'].value;
    document.getElementById(id).className = document.getElementById(id).className.replace( /(?:^|\s)selected(?!\S)/g , '' );

Answer 1

创建一个removeClass函数，该函数迭代元素并用空字符串替换该类，从而将其删除。

function removeClass(selector, klass) {
    var elems = document.querySelectorAll(selector);

    for (var i = elems.length; i--;) {
        var reg = new RegExp("(?:^|\\s)"+ klass +"(?!\\S)", "gi");
        elems[i].className = elems[i].className.replace(reg, "");
    }
}

用作

removeClass('.classname', 'classToRemove');

FIDDLE

Answer 2

尝试这样的方法从所有链接中删除该类，然后将“selected”类添加回您想要的链接：

var elems = document.getElementsByClassName('selected');
for (var i = 0; i < elems.length; i++) {
    elems[i].className = elems[i].className.replace('selected', '')
}

更新：只是为了澄清，代码以您在问题中的形式工作。我已经采取了它并应用了两个调整。 1）隐藏的输入不应该在表标签内，而应在td / th标签之外。 2）我添加了“return false;”链接。

<DOCTYPE html>
<html>
    <head>
        <style>.selected{border:dotted 2px;border-color:gray;}</style>
        <script>
            function edit(link) {
                var elems = document.getElementsByClassName('selected');
                for (var i = 0; i < elems.length; i++) {
                    elems[i].className = elems[i].className.replace('selected', '')
                }
                document.getElementById(link).className += "selected"
            }
        </script>
    </head>
    <body>
        <div id='linkEditDiv'>
            <form name='linkEditor'>
                <input type="hidden" name='linkId'>
                <table>
                    <tr><th>Label:</th><td> <input type='text'    name='label'></td></tr>
                    <tr><th>Link:</th><td> <input type='text' name='link'></td></tr>
                    <tr><th></th><td><input type="button" onclick='submitForm()' value="OK" ><input type="button" onclick='cancel()' value="Cancel" ></td></tr>
                </table>
            </form>
        </div>

        <a href='#' onclick='edit("lr1"); return false;' id='lr1'>link1</a>
        <a href='#' onclick='edit("lr2"); return false;' id='lr2'>link1</a>
        <a href='#' onclick='edit("lr3"); return false;' id='lr3'>link1</a>
    </body>
</html>

这不再是您要求帮助的问题。

从JavaScript中的多个元素中删除类

2 个答案: