Question

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

我认为我使用了一个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();

Answer 1

该函数关闭两个类，而不仅仅关闭所选类。

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

不是按类名选择元素，而是选择on which the event was fired at。

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

Answer 2

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

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

e.g。删除SO徽标！

function notSO(){this.parentNode.removeChild(this);}
document.getElementById("hlogo").addEventListener("mouseover", notSO, true);

Answer 3

更新了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的原因。

Answer 4

这是您修改后的代码：

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

删除this.class函数Javascript

4 个答案: