0

我有一个连接到一个类的函数，它可以让我通过类名删除它。我遇到的问题是当我有两个具有相同类名的元素时。该函数关闭两个类，而不仅仅是选择的类。

我认为我使用了一个 element.this 函数，但是当我尝试它时，没有一个类被删除。

有任何想法吗 ？

 function CloseEvent(){
        var CloseEvent = "close";
        var addClassArr= document.getElementsByClassName(CloseEvent);
        for(var i=0; i<addClassArr.length; i++){
            var addClass = addClassArr[i];
            addClass.addEventListener("click", closebutton, true);
        }       
        function closebutton() {

        var classToRemove = "dice-window-wrapper";
            var elems = document.getElementsByClassName(classToRemove);
            for (var i = 0;  i < elems.length; i--) {
                elems[i].parentNode.removeChild(elems[i])

            }
        } 


    }
    CloseEvent();
4

4 回答 4

3

该函数关闭两个类，而不仅仅是选择的类。

这是错误的，因为通过document.getElementsByClassName- 选择了多个，并且所有这些都被正确删除。

不要按类名选择元素，而是选择触发事件的那个。

function closebutton(e) {
    var elem = e.target; // or just the "this" keyword
    // elem is the <div class="close" />
    var wrapper = elem.parentNode.parentNode;
    // wrapper is the <div class="dice-window-wrapper" />
    wrapper.parentNode.removeChild(wrapper);
}
于 2013-02-05T10:29:11.263 回答
1

更新了 html 代码以反映您网站上使用的 html。

<div class="dice-window-wrapper">
    <div class="dice-menubar-wrapper">
        <div class="close">
            close one
        </div>
    </div>
</div>
<div class="dice-window-wrapper">
    <div class="dice-menubar-wrapper">
        <div class="close">
            close one
        </div>
    </div>
</div>

那么这里是如何删除点击的元素：

function CloseEvent(){
        var CloseEvent = "close";
        var addClassArr= document.getElementsByClassName(CloseEvent);
        for(var i=0; i<addClassArr.length; i++){
            var addClass = addClassArr[i];
            addClass.addEventListener("click", closebutton, true);
        }       
        function closebutton(e) {
            var classToRemove = " "+"dice-window-wrapper"+" ";
            var obj=e.target;
            while((" "+obj.className+" ").indexOf(classToRemove)==-1){ 
                obj=obj.parentNode;
            }
            if(obj.tagName.toLowerCase()!="div"){
                console.log("something wrong in closebutton");
                return;
            }
            obj.parentNode.removeChild(obj);
        } 
    }

请注意，这在 IE8 中根本不起作用，因为不支持 getElementsByClassName 不是以这种方式传递的事件，并且 addEventListner 可能存在问题。这就是我通常使用 jQuery 的原因。

于 2013-02-05T10:38:58.070 回答
1

您应该能够通过使用this识别触发元素来识别调用 JS 函数的对象，例如

function closebutton() {
    this.parentNode.removeChild(this);
}

例如删除 SO 标志！

function notSO(){this.parentNode.removeChild(this);}
document.getElementById("hlogo").addEventListener("mouseover", notSO, true);
于 2013-02-05T10:28:39.233 回答
0

这是您修改后的代码：

 function CloseEvent(){
    var CloseEvent = "close";
    var addClassArr= document.getElementsByClassName(CloseEvent);
    for(var i=0; i<addClassArr.length; i++){
        var addClass = addClassArr[i];
        addClass.addEventListener("click", function(){ closebutton(this) }, true);
    }       
    function closebutton( elem ) {

    var classToRemove = "dice-window-wrapper";
        //var elems = document.getElementsByClassName(classToRemove);
        //for (var i = 0;  i < elems.length; i--) {
        //    elems[i].parentNode.removeChild(elems[i])
        //}
        // you have passed the element to be removed, directly remove it
        elem.parentNode.removeChild(elem);
    } 
}
CloseEvent();
于 2013-02-05T10:31:45.400 回答