删除this.class函数Javascript

remove this.class function Javascript

本文关键字：Javascript 函数 class this 删除      更新时间：2023-09-26

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

我认为我使用use a 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();

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

这是错误的，因为不止一个是通过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);
}

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

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

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

例如，删除SO徽标！

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

这是您修改后的代码：

 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();
相关文章：