Wie entferne ich ein HTML-Element mit Javascript?

124

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

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

javascript html Newbie Coder
quelle

Was ist, wenn ich darauf klicke, einen Fehler erkenne und Stopp drücke ?

Alex

Tut mir leid, es ist ein Thema, aber es ist wirklich lustig, dass er / sie sich "Newbie Coder" nannte und jetzt hat das Profil einen Ruf von ungefähr 9000. In den "guten alten Zeiten" etwas zu fragen ist heutzutage wirklich profitabel. :)

Rene

189

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

Wenn Sie das Element entfernen und das Formular nicht senden möchten , behandeln Sie submitstattdessen das Ereignis im Formular und kehren Sie falsevon 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) dafür überhaupt kein Formular, nicht wenn der einzige Zweck darin besteht, das 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 einen guten Instinkt dafür zu haben, dass sich Ihr JavaScript-Code in einer eigenen Datei befindet und so weiter. Der nächste Schritt besteht darin, weiter zu gehen und die Verwendung von onXYZAttributen zum Anschließen von Ereignishandlern zu vermeiden . Stattdessen können Sie sie in Ihrem JavaScript mit der neueren Methode (ca. 2000) verbinden:

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

... rufen Sie dann pageInit();von einem scriptTag ganz am Ende Ihrer Seite body(kurz vor dem schließenden </body>Tag) oder aus dem window loadEreignis heraus auf, obwohl dies sehr spät im Ladezyklus der Seite geschieht und daher normalerweise nicht zum Anschließen eines Ereignisses geeignet ist Handler (dies geschieht zum Beispiel, nachdem alle Bilder endgültig geladen wurden).

Beachten Sie, dass ich einige Handhabungen vornehmen musste, um mit Browserunterschieden umzugehen. Sie möchten wahrscheinlich eine Funktion zum Anschließen 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 haben mit vielen Inkonsistenzen zu tun und bieten auch viele nützliche Dienstprogramme - wie ein Mittel zum Anschließen von Event-Handlern, die sich damit befassen Browserunterschiede. Die meisten von ihnen bieten auch die Möglichkeit, eine Funktion einzurichten (zpageInit) ausgeführt werden, sobald das DOM manipulationsbereit ist, lange bevor es window loadausgelöst wird.

TJ Crowder
quelle

Ändern Sie es in type="button"oder setzen Sie return false;Ihre JS-Funktion ein

Pav

@Pav: Ich denke, ich bleibe bei der Einreichung, da dies nur eine experimentelle Übung ist. Ich werde einige Projekte machen, die Submit verwenden, damit ich mich besser daran gewöhne ... Trotzdem danke für die Idee.

Newbie Coder

@Newbie: Ich habe ein paar weitere Notizen hinzugefügt.

TJ Crowder

2

warum nicht einfach elem.remove ();

Muhammad Umer

1

@ Ghos3t - Einige Möglichkeiten: 1. Jede Funktion, die Sie von einem Handler im Attributstil aufrufen, muss global sein. Der globale Namespace ist bereits Really Crowded ™ und es ist einfach, einen Funktionsnamen auszuwählen, der mit etwas anderem in Konflikt steht (dies) Sie können jedoch ein Objekt mit einem wahrscheinlich eindeutigen Namen verwenden und alle Ihre Handler darauf setzen. 2. Wenn Sie die alte Methode im Attributstil verwenden (oder der onxyzEigenschaft des Elements zuweisen ), ist nur ein einziger Handler zulässig. Wenn Sie der Eigenschaft zuweisen, ersetzen Sie alles, was früher vorhanden war, sodass es nicht gut mit anderen funktioniert. (Fortsetzung)

TJ Crowder

34

Mach das einfach element.remove();

Probieren Sie es hier aus

http://jsfiddle.net/4WGRP/

Muhammad Umer
quelle

5

Seien Sie vorsichtig damit, da dies eine ziemlich neue Ergänzung zu sein scheint und keine vollständige Browserunterstützung bietet, nämlich IE- und FF-Versionen 22 und früher ( red-team-design.com/… ).

Dule

1

Ich persönlich würde weitere 5 Jahre warten, um dies zu nutzen

Slebetman

2

Nun, dies scheint jetzt fehlerhaft unterstützt zu werden: caniuse.com/#search=remove . Ich würde akzeptieren, es jetzt zu benutzen. Wenn Sie IE11 unbedingt unterstützen müssen, könnte eine Polyfüllung leicht erstellt werden ...

Jehon

5

Das Schreiben von zukunftssicherem Code ist besser als das Programmieren für die Vergangenheit. Sparen Sie sich die Wartungszeit und verwenden Sie.remove()

Gibolt

9

Sie sollten den Eingabetyp = "button" anstelle des Eingabetyps = "submit" verwenden.

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

Testen Sie das Mozilla Developer Center auf grundlegende HTML- und Javascript-Ressourcen

CoderHawk
quelle

1

Ich habe Ihren Link von W3Schools zum Mozilla Developer Center geändert. Werfen Sie einen Blick auf w3fools.com für meine Argumentation ... Abgesehen davon, gute Antwort :)

Alastair Pitts

2

@Alastair Pitts - es ist in Ordnung. Ich möchte PO nur auf HTML und js grundlegende Tutorials

verweisen

8

Ihr JavaScript ist korrekt. Ihre Schaltfläche hat type="submit", wodurch die Seite aktualisiert wird.

Pav
quelle

5

Es wird erneut angezeigt, da die Schaltfläche "Senden" die Seite neu lädt. Der einfachste Weg, um dieses Verhalten zu verhindern, besteht darin return false, dem onclickÄhnlichen Folgendes hinzuzufügen :

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

mVChr
quelle

4

Ändern Sie den Eingabetyp in "Schaltfläche". Wie TJ und Pav sagten, wird das Formular eingereicht. Dein Javascript sieht korrekt aus und ich empfehle dir, dass du es ohne JQuery ausprobiert hast :)

Newtang
quelle

Ich denke, ich bleibe bei der Einreichung, da dies nur eine experimentelle Übung für meine zukünftigen Projekte ist, bei der die Einreichung verwendet wird, damit ich mich besser daran

gewöhne

4

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()
    })

})

E-Motiv
quelle

3

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

Alex
quelle

3

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

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

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

Sim Reaper
quelle

2

Das funktioniert. Entfernen divSie einfach die Schaltfläche aus dem "Dummy", wenn Sie die Schaltfläche 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>

Erweitern Sie das Snippet

Durtle02
quelle

1

Ich bin auch noch ein Neuling, aber hier ist ein einfacher und einfacher Weg: Sie können OuterHTML verwenden, das ist das ganze Tag, nicht nur ein Teil:

EX: <tag id='me'>blahblahblah</tag>'s innerHTML wäre blahblahblahund OuterHTML wäre das Ganze <tag id='me'>blahblahblah</tag>.

Wenn Sie beispielsweise das Tag löschen möchten, werden im Grunde genommen die Daten gelöscht. Wenn Sie also die äußere HTML in eine leere Zeichenfolge ändern, ist dies wie das Löschen.

<body>
    <p id="myTag">This is going to get removed...</p>
    <input type="button" onclick="javascript:
        document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
    " value="Remove Praragraph">
</body>

Wenn Sie es stattdessen einfach nicht anzeigen möchten, können Sie es in JS mithilfe der Eigenschaften für Sichtbarkeit, Deckkraft und Anzeige formatieren.

document.getElementById('foo').style.visibility = hidden;
//or
document.getElementById('foo').style.opacity = 0;
//or
document.getElementById('foo').style.display = none;

Beachten Sie, opacity dass das Element weiterhin angezeigt wird, Sie es jedoch nicht so oft sehen können. Sie können auch Text auswählen, kopieren, einfügen und alles tun, was Sie normalerweise tun könnten, obwohl es unsichtbar ist.

Visibility passt besser zu Ihrer Situation, lässt jedoch einen leeren transparenten Bereich übrig, der so groß ist wie das Element, auf das er angewendet wurde.

Ich würde empfehlen, dass Sie anzeigen, je nachdem, wie Sie Ihre Webseite erstellen. Zeigen Sie an, dass das Element grundsätzlich aus Ihrer Ansicht gelöscht wird, Sie können es jedoch weiterhin in DevTools anzeigen. Hoffe das hilft!

HarryJamesPotter27
quelle

Wie entferne ich ein HTML-Element mit Javascript?

Antworten: