CODEWITHSUNDEEP
javascript
Dymond
Dymond

Reputation: 2277

remove this.class function Javascript

I have a function connected to a class, that lets me remove it by className. the problem I have is when I have two elements with the same class name. the function close both of the classes and not only the one that's selected.

I think that i use use a element.this function, but when I try it, none of the classes removes.

Any ideas ?

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

Upvotes: 0

Views: 150

Answers (4)

HMR
HMR

Reputation: 39290

Updated the html code to reflect the html used on your site.

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

then here is how to remove the clicked element:

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

Note that this doesn't work at all in IE8 because getElementsByClassName is not supported not is the event passed in this way and there might be a problem with addEventListner. That's why I usually use jQuery.

Upvotes: 1

Bergi
Bergi

Reputation: 664969

the function close both of the classes and not only the one that's selected.

That's wrong, since more than one are selected via document.getElementsByClassName - and all of them are removed correctly.

Instead of selecting elements by their class name, select the one 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);
}

Upvotes: 3

m.brindley
m.brindley

Reputation: 1228

You should be able to identify the object calling a JS function by using this to identify the triggering element like

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

e.g. Delete the SO logo!

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

Upvotes: 1

SHANK
SHANK

Reputation: 2958

Here's your modified code:

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

Upvotes: 0

Related Questions