Heim > Artikel > Web-Frontend > So löschen Sie li in Javascript
So löschen Sie li in Javascript
- 藏色散人Original
- 2021-05-11 16:17:204039Durchsuche
So löschen Sie li in Javascript: Rufen Sie zuerst alle li-Tags ab. Bestimmen Sie dann, ob auf ein bestimmtes li-Tag geklickt wird. Löschen Sie schließlich das li-Tag.
Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript 1.8.5 und HTML5-Version, Dell G3-Computer.
JS realisiert das Löschen von Li-Tags
Verwenden Sie objektorientiertes Denken, um die Funktion zum Löschen von Käuferinformationen abzuschließen. Jede Information enthält:
- Name
- Telefon
- Telefonnummer
- Provinz
Erfüllen Sie die folgenden Anforderungen:
Sie können keine Bibliotheken von Drittanbietern ausleihen und müssen zur Implementierung nativen Code verwenden.
Fügen Sie in Kombination mit der angegebenen Grundcodestruktur den Code hier unten im 2. Code hinzu, um die Löschfunktion der Käuferinformationen abzuschließen. Beachten Sie, dass diese Seite deutlich auf dem Mobiltelefon angezeigt werden muss.
Der js-Code kann beliebig angepasst werden, beispielsweise kann er mit es6-Code vervollständigt werden.
Basiscode:
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<!--code here-->
<title>demo</title>
<style>
* { padding: 0; margin: 0; }
.head, li p { display: inline-block; width: 70px; text-align: center; }
li .id, li .sex, .id, .sex { width: 15px; }
li .name, .name { width: 40px; }
li .tel, .tel { width: 90px; }
li .del, .del { width: 15px; }
ul { list-style: none; }
.user-delete { cursor: pointer; }
</style></head><body><p id="J_container">
<p class="record-head">
<p class="head id">序号</p>
<p class="head name">姓名</p>
<p class="head sex">性别</p>
<p class="head tel">电话号码</p>
<p class="head province">省份</p>
<p class="head">操作</p>
</p>
<ul id="J_List">
<li>
<p class="id">1</p>
<p class="name">张三</p>
<p class="sex">男</p>
<p class="tel">13788888888</p>
<p class="province">浙江</p>
<p class="user-delete">删除</p>
</li>
<li>
<p class="id">2</p>
<p class="name">李四</p>
<p class="sex">女</p>
<p class="tel">13788887777</p>
<p class="province">四川</p>
<p class="user-delete">删除</p>
</li>
<li>
<p class="id">3</p>
<p class="name">王二</p>
<p class="sex">男</p>
<p class="tel">13788889999</p>
<p class="province">广东</p>
<p class="user-delete">删除</p>
</li>
</ul></p><script>
// 此处也可换成ES6的写法
function Contact() {
this.init();
} // your code here</script></body></html>Beachten Sie, dass Sie zur klaren Anzeige dieser Seite auf Mobiltelefonen responsive Meta-Tags verwenden sollten:
<meta name="viewport" content="width = device-width,initial-scale=1">
Idee:
Besorgen Sie sich zuerst alle Li-Tags und bestimmen Sie dann, um welches Li-Tag es sich handelt verwendet Klicken Sie, um das Element nach dem Klicken zu entfernen.
Die Kontaktfunktion wurde im Basiscode angegeben und die Init-Methode muss zur Funktion hinzugefügt werden:
Contact.prototype.init = function () {
console.log("Test"); var p = document.getElementsByClassName("user-delete"); var ul = document.querySelector("#J_List"); var list = ul.querySelectorAll("li"); for (var i = 0; i < p.length; i++) {
(function (i) {
p[i].onclick = function () {
list[i].remove();
console.log(i);
}
})(i);
}
} new Contact();Empfohlenes Lernen: „Javascript-Tutorial für Fortgeschrittene“
Das obige ist der detaillierte Inhalt vonSo löschen Sie li in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!