Heim > Web-Frontend > js-Tutorial > Hauptteil

So entfernen Sie Elementinhalte mit jquery

WBOY
Freigeben: 2021-11-24 15:28:34
Original
2491 Leute haben es durchsucht

Methode: 1. Verwenden Sie die Methoden „children()“ und „remove()“, um den Inhalt des angegebenen Elements zu löschen. Die Syntax lautet „$(element).children().remove();“; )-Methode zum Löschen des Inhalts des angegebenen Elements. Die Syntax lautet „$(element).empty();“.

So entfernen Sie Elementinhalte mit jquery

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JQuery-Version 1.10.0, Dell G3-Computer.

So entfernen Sie Elementinhalte mit JQuery

In JQuery können Sie das ID-Attribut für einen Teil des Inhalts-Tags innerhalb des Tags festlegen und einen Teil des Inhaltsobjekts über die ID erhalten.

Wenn Sie Elemente und Inhalte löschen müssen, können Sie im Allgemeinen die folgenden zwei jQuery-Methoden verwenden:

  • remove() – das ausgewählte Element (und seine Unterelemente) löschen

  • empty() – löschen aus das ausgewählte Element Untergeordnete Elemente

Sehen wir uns die Verwendung dieser beiden Methoden anhand von Beispielen an:

1 Verwenden Sie die Methode children(), um alle direkten untergeordneten Elemente des ausgewählten Elements zurückzugeben , und verwenden Sie dann die jQuery-Methode „remove()“, um das ausgewählte Element und seine untergeordneten Elemente zu löschen.

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").children().remove();
  });
});
</script>
</head>

<body>

<div id="div1" style="height:120px;width:300px;border:1px solid black;background-color:yellow;">
<p>This is some text in the div.</p>
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

<br>
<button>删除 div 元素</button>

</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

So entfernen Sie Elementinhalte mit jquery

2. Die jQuery-Methode empty() löscht die untergeordneten Elemente des ausgewählten Elements.

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>清空 div 元素</button>
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnisse:

So entfernen Sie Elementinhalte mit jquery

Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo entfernen Sie Elementinhalte mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage