0

クラスに接続された関数があり、classNameで削除できます。私が抱えている問題は、同じクラス名の要素が2つある場合です。この関数は、選択されたクラスだけでなく、両方のクラスを閉じます。

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

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 に答える
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);
        } 
    }

getElementsByClassNameはサポートされていないため、これはIE8ではまったく機能しないことに注意してください。この方法で渡されるイベントではなく、addEventListnerに問題がある可能性があります。そのため、私は通常jQueryを使用します。

于 2013-02-05T10:38:58.070 に答える
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 に答える