it-swarm.com.de

Wie entferne ich ein HTML-Element mit Javascript?

Ich bin ein totaler Neuling. Kann mir jemand sagen, wie man ein HTML-Element mit dem ursprünglichen Javascript entfernt, nicht mit 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);
}

Was passiert, wenn ich auf die Schaltfläche "Senden" klicke, ist, dass sie für eine sehr kurze Zeit verschwindet und dann sofort wieder angezeigt wird. Ich möchte das Element vollständig entfernen, wenn ich auf die Schaltfläche klicke.

116
Newbie Coder

Was passiert ist, dass das Formular gesendet wird und die Seite (mit ihrem ursprünglichen Inhalt) aktualisiert wird. Sie bearbeiten das Ereignis click über eine Senden-Schaltfläche.

Wenn Sie das Element entfernen und not das Formular senden möchten, behandeln Sie stattdessen das Ereignis submit im Formular und geben Sie false von Ihrem Handler zurück:

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

Aber Sie brauchen (oder wollen) überhaupt kein Formular dafür, nicht, wenn der einzige Zweck darin besteht, die Dummy-Div zu entfernen. Stattdessen:

HTML:

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

JavaScript:

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

Diese Art der Einrichtung von Ereignishandlern ist jedoch altmodisch. Sie scheinen ein gutes Gespür dafür zu haben, dass sich Ihr JavaScript-Code in einer eigenen Datei befindet und so weiter. Der nächste Schritt besteht darin, noch weiter zu gehen und die Verwendung von onXYZ - Attributen zum Anschließen von Ereignishandlern zu vermeiden. Stattdessen können Sie sie in Ihrem JavaScript auf die neuere (um das Jahr 2000) Weise einbinden:

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

... dann rufen Sie pageInit(); von einem script - Tag ganz am Ende Ihrer Seite auf body (kurz vor dem schließenden </body> - Tag) oder von Dies geschieht jedoch innerhalb des Ereignisses windowload sehr spät im Seitenladezyklus und ist daher in der Regel nicht geeignet, Event-Handler anzuschließen (es kommt vor) after Alle Bilder wurden zuletzt geladen, zum Beispiel).

Beachten Sie, dass ich einige Handgriffe ausführen musste, um mit den Unterschieden im Browser fertig zu werden. Wahrscheinlich möchten Sie eine Funktion zum Verknüpfen von Ereignissen, damit Sie diese Logik nicht jedes Mal wiederholen müssen. Oder verwenden Sie eine Bibliothek wie jQuery , Prototype , YUI , Closure =, oder eine von mehreren anderen , um diese Browserunterschiede für Sie auszugleichen. Es ist sehr wichtig , die zugrunde liegenden Dinge zu verstehen, sowohl in Bezug auf JavaScript-Grundlagen als auch in Bezug auf DOM-Grundlagen, aber Bibliotheken beschäftigen sich auch mit vielen Inkonsistenzen bieten eine Menge praktischer Hilfsprogramme - wie zum Beispiel das Anschließen von Event-Handlern, die sich mit Unterschieden im Browser befassen. Die meisten von ihnen bieten auch die Möglichkeit, eine Funktion (wie pageInit) so einzurichten, dass sie ausgeführt wird, sobald das DOM manipulationsbereit ist, lange bevor windowload ausgelöst wird.

173
T.J. Crowder

Mach einfach das element.remove();

Probieren Sie es hier aus

http://jsfiddle.net/4WGRP/

30
Muhammad Umer

Sie sollten input type = "button" anstelle von input type = "submit" verwenden.

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

Checkout Mozilla Developer Center für grundlegende HTML- und Javascript-Ressourcen

9
CoderHawk

Ihr JavaScript ist korrekt. Dein Button hat type="submit", wodurch die Seite aktualisiert wird.

8
Pav

Es wird erneut angezeigt, da die Seite über die Schaltfläche "Senden" erneut geladen wird. Die einfachste Möglichkeit, dieses Verhalten zu verhindern, ist das Hinzufügen eines return false zum onclick wie folgt:

<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />
5
mVChr

Ändern Sie den Eingabetyp auf "button". Als T.J. und Pav sagte, das Formular wird eingereicht. Dein Javascript sieht korrekt aus und ich empfehle dir, dass du es auf eine Art und Weise ausprobiert hast, die nicht von JQuery stammt :)

4
Newtang

Das ist der richtige Code. Wahrscheinlich wird Ihr Formular gesendet, und Sie sehen die neue Seite (auf der das Element wieder vorhanden sein wird).

3
alex

Das funktioniert. Entfernen Sie einfach den Knopf vom "Dummy" div, wenn Sie den Knopf behalten möchten.

function removeDummy() {
  var elem = document.getElementById('dummy');
  elem.parentNode.removeChild(elem);
  return false;
}
#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}
<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>
3
Durtle02

Versuchen Sie, diesen Code in Ihrem Skript auszuführen.

document.getElementById("dummy").remove();

Und es wird hoffentlich das Element/die Schaltfläche entfernen.

1
Sim Reaper

index.html

<input id="suby" type="submit" value="Remove DUMMY"/>

myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})
1
e-motiv