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.