Jak odstranit prvek HTML pomocí Javascriptu?

Jsem úplný nováček. Může mi někdo říct, jak odstranit prvek HTML pomocí původního Javascriptu, nikoli jQuery.

index.html

<html>
<head>
 <script type="text/javascript" src="myscripts.js" > </script>
 <style>
 #dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
 }
 </style>
</head>
<body>
 <div id="dummy"></div>

 <form>
  <input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>
</body>

myscripts.js

function removeDummy() {
 var elem = document.getElementById('dummy');
 elem.parentNode.removeChild(elem);
}

Co se stane, když kliknu na tlačítko Odeslat, zmizí na velmi krátkou dobu a poté se okamžitě objeví. Po kliknutí na tlačítko chci prvek úplně odstranit.

Odpověď

Dochází k tomu, že se formulář odesílá, a tak se obnovuje stránka (s původním obsahem). Řešíte click událost na tlačítku Odeslat.

Pokud chcete prvek odstranit a ne odešlete formulář, zpracujte submit událost ve formuláři a vrátí false od vašeho handlera:

HTML:

<form  onsubmit="return removeDummy(); ">
    <input type="submit" value="Remove DUMMY"/>
</form>

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

Ale k tomu vůbec nepotřebujete (ani nechcete) formulář, ne pokud je jeho jediným účelem odstranění figuríny div. Místo toho:

HTML:

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

Nicméně , je tento styl nastavení obslužných rutin událostí staromódní. Zdá se, že máte dobrý instinkt v tom, že váš kód JavaScript je ve vlastním souboru a podobně. Dalším krokem je jít dále a vyhnout se použití onXYZ atributy pro připojení obslužných rutin událostí. Místo toho je ve svém JavaScriptu můžete propojit s novějším způsobem (kolem roku 2000):

HTML:

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}
function pageInit() {
    // Hook up the "remove dummy" button
    var btn = document.getElementById('btnRemoveDummy');
    if (btn.addEventListener) {
        // DOM2 standard
        btn.addEventListener('click', removeDummy, false);
    }
    else if (btn.attachEvent) {
        // IE (IE9 finally supports the above, though)
        btn.attachEvent('onclick', removeDummy);
    }
    else {
        // Really old or non-standard browser, try DOM0
        btn.onclick = removeDummy;
    }
}

…potom zavolejte pageInit(); z script tag na samém konci vaší stránky body (těsně před koncovkou </body> nebo z window load událost, i když k tomu dojde velmi pozdě v cyklu načítání stránky, a proto obvykle není dobré pro připojení obslužných rutin událostí (stává se po všechny obrázky se například konečně načetly).

Všimněte si, že jsem musel provést nějakou manipulaci, abych se vypořádal s rozdíly v prohlížeči. Pravděpodobně budete chtít funkci pro připojení událostí, abyste tuto logiku nemuseli pokaždé opakovat. Nebo zvažte použití knihovny, jako je jQuery, Prototype, YUI, Closure nebo některé z několika dalších, abyste tyto rozdíly v prohlížeči vyrovnali. Je to velmi důležité abychom porozuměli základním věcem, které se odehrávají, a to jak z hlediska základů JavaScriptu, tak základů DOM, ale knihovny se vypořádávají s mnoha nekonzistentnostmi a také poskytují mnoho užitečných nástrojů – jako prostředek pro připojení obslužných programů událostí, které se zabývají rozdíly v prohlížečích. Většina z nich také poskytuje způsob, jak nastavit funkci (například pageInit ) spustit, jakmile bude DOM připraven k manipulaci, dlouho před window load požáry.