JQuery-Beispiel „remove()“, „removeAttr()“ und „removeClass()“.

JQuery Remove()-Methode

Die Methode „remove()“ ist dieselbe wie die Methode „detach()“, die die ausgewählten Elemente einschließlich aller Text- und untergeordneten Knoten aus dem DOM entfernt. Allerdings bleiben nicht alle Daten und Ereignisse, die mit entfernten Elementen im Satz übereinstimmender Elemente aus dem DOM verknüpft sind, vollständig erhalten. Es stellt Elementdaten wieder her, nicht seine Ereignishandler. Alle mit Elementen verknüpften Ereignisse und Daten werden entfernt.

JQuery Remove()-Syntax

$(selector).remove();

Es enthält keine Parameter.

Beispiel für JQuery Remove()

<!doctype html>
<head>
<title>JQuery Remove Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Remove Method Example</h2>
<script type="text/javascript">`
   $(document).ready(function(){
     $("button").click(function(){
       $("h3,h4").remove();
      });
   });
</script>
<body>
   <button>Click to remove the elements</button>
   <h3>Hello world!!!</h3>
   <h4>Welcome to JQuery!!!</h4>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“button”).click(function()) definiert das Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • $(“h3,h4”).remove(); Zeile definiert die Methode „remove()“, die die ausgewählten Elemente aus dem DOM entfernt.
  • Wenn wir das obige Skript ausführen, erscheint eine Schaltfläche im Browser. Wenn wir auf die Schaltfläche klicken, werden alle Elemente aus dem DOM entfernt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie diese Demo aus

Beispiel für eine JQuery-Remove-Methode

JQuery-Methode „removeAttr()“.

Die JQuery-Methode „removeattr()“ wird verwendet, um Attribute aus den ausgewählten Elementen im Satz übereinstimmender Elemente zu entfernen. Es verwendet die Funktion „removeAttribute()“, die direkt für das jQuery-Objekt aufgerufen werden kann. Es wird das Attribut entfernt, das im Parameter der Methode „removeAttr()“ angegeben ist.

JQuery-RemoveAttr()-Syntax

$(selector).removeAttr(attribute);

Der Parameter „Attribut“ ist ein erforderlicher Parameter, der ein oder mehrere zu entfernende Attribute angibt.

JQuery-RemoveAttr()-Beispiel

<!doctype html>
<head>
<title>JQuery Remove Attribute</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Remove Attribute Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("#myattribute").click(function(){
        $("h4").removeAttr("style");
      });
   });
</script>
<body>
       <button id="myattribute">Remove the attribute</button>
        <h4 style="background:orange;">Welcome to JQuery!!!!</h4>
</body>
</html>

Fazit zu JQuery RemoveAttr()

  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Anweisung $(“#myattribute”).click(function()) definiert ein Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • $(„h4“).removeAttr(“style“); Zeile definiert die Methode „removeAttr()“, um Attribute aus den ausgewählten Elementen zu entfernen. Hier wird das Stilattribut entfernt, das im h4-Tag angegeben ist.
  • Nach der Ausführung des obigen Skripts wird im Browser eine Schaltfläche angezeigt. Wenn Sie auf die Schaltfläche klicken, wird das Attribut von den ausgewählten Elementen entfernt. Bevor Sie auf die Schaltfläche klicken, ist die Hintergrundfarbe der Linie orange. Wenn Sie auf die Schaltfläche klicken, wird die Hintergrundfarbe entfernt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie diese Demo aus

Beispiel für eine JQuery-Methode zum Entfernen von Attributen

JQuery-Methode „removeClass()“.

JQuery hat eine Methode namens „removeClass()“ bereitgestellt, um die CSS-Klasse aus den ausgewählten Elementen im Satz übereinstimmender Elemente zu entfernen. Der im Parameter definierte Klassenname wird aus den ausgewählten Elementen entfernt. Angenommen, wenn keine Klassennamen definiert sind, werden alle Klassen aus dem DOM entfernt.

JQuery-RemoveClass()-Syntax

$(selector).removeClass(classname);

Der Parameter „Klassenname“ ist ein erforderlicher Parameter, der eine oder mehrere CSS-Klassen aus jedem der übereinstimmenden Elemente entfernt.

JQuery-RemoveClass()-Beispiel

<!doctype html>
<head>
<title>JQuery Remove Class</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Remove Class Example</h2>
<style type="text/css">
   .highlight
   {
      background:green;
   }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#myremoveclass").click(function(){
        $("h4").removeClass("highlight");
      });
   });
</script>
<body>
       <button id="myremoveclass">Remove Class</button>
        <h4  >Welcome to JQuery!!!!</h4>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Anweisung $(“#myremoveclass”).click(function()) definiert ein Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • $(„h4“).removeClass(„hervorheben“); Zeile definiert die Methode „removeClass()“, die die CSS-Klasse aus den ausgewählten Elementen entfernt. Hier wird die Klasse namens „highlight“ aus dem DOM entfernt.
  • Die Highlight-Klasse enthält die Hintergrundfarbe Grün für die Zeile Willkommen bei JQuery!!!! .Wenn Sie das obige Skript ausführen, wird im Browser eine Schaltfläche angezeigt. Wenn Sie auf die Schaltfläche klicken, wird die Klasse aus den ausgewählten Elementen entfernt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie diese Demo aus

Beispiel für eine JQuery-Klassenmethode entfernen

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen