removeChild funktioniert nicht trotz Anruf von Eltern

Ich habe ein Problem mit der removeChild Methode. Der Browser gibt mir einen Typfehler.removeChild funktioniert nicht trotz Anruf von Eltern

Hier ist mein Code:

HTML

<header> 
    <div id="header-div"> 
     <img id="logo-image" src="img.jpg" alt="image"> 
    </div> 
    <div class="mobile-hamburger"> 
     <a href="#menu" class="box-shadow-menu">text</a> 
    </div> 
</header>

var windowWidth = parseInt(window.innerWidth); 

if (windowWidth >= 700) { 

let headerTag = document.getElementsByTagName("header"); 
let hamburgerMenu = document.getElementsByClassName("mobile-hamburger"); 

hamburgerMenu.headerTag.removeChild(hamburgerMenu); 

}

ich bin Tests, wenn die Fensterbreite 1920px ist. Ich kann auch sehen, dass Browser <header> Tag und <div> mit "mobile-hamburger" Klasse im Debugging-Tool ergreift. Also sind sie in Ordnung.

Ich kann das Problem mit removeChild Linie hier nicht finden. Ich entferne ein Element, nachdem ich den Elternteil angerufen habe.

Hier ist ein jsfiddle mit diesem Code: https://jsfiddle.net/u3r9m5f0/

Quelle

2016-12-03 Eorekan

"getElementsByClassName" gibt eine Auflistung zurück. Benutze eine Schleife. –

Nicht sicher, was Sie mit 'hamburgerMenu.headerTag' gehofft haben. Das 'headerTag' ist eine Variable, die ebenfalls eine Sammlung ist und nicht mit der' hamburgerMenu'-Sammlung zusammenhängt. –

Nur FYI, es gibt keinen Grund, JS für diese Funktionalität zu verwenden - Sie können es einfach in einfachem CSS tun. – junkfoodjunkie

document.getElementsByTagName und document.getElementsByClassName Rückkehr Knotenlisten, die wie Objekte Array sind. Sie müssen das Element am ersten Index abrufen.

Sie haben auch die Syntax für parent.removeChild(child) falsche

var windowWidth = parseInt(window.innerWidth); 

if (windowWidth >= 700) { 

    let headerTag = document.getElementsByTagName("header")[0]; 
    let hamburgerMenu = document.getElementsByClassName("mobile-hamburger")[0]; 

    headerTag.removeChild(hamburgerMenu); 

}

Quelle

2016-12-03 20:17:48 synthet1c

Ja, das ist es! Ich danke dir sehr! Ich muss schlafen gehen ... – Eorekan

@Eorekan: Wenn Sie nur das erste Element wollen, können Sie 'querySelector' verwenden. Und Sie müssen das Elternelement nicht separat abrufen, da Sie '.parentNode' vom Kind verwenden können. 'var hm = document.querySelector (". mobile-hamburger "); hm.parentNode.removeChild (hm); ' –

getElementsByClassName gibt ein Array zurück, auch sie enthält ein Element so getElementsByClassName[0] verwenden das erste Vorkommen (die einzige in diesem Fall)

Gleiche wählen gilt für getElementsbyTagName

Quelle

2016-12-03 20:24:53

removeChild funktioniert nicht trotz Anruf von Eltern

Antwort

Verwandte Themen