Heim > Artikel > Web-Frontend > So entfernen Sie Li in Javascript
So entfernen Sie Li in Javascript
- 藏色散人Original
- 2021-07-17 14:32:342883Durchsuche
So entfernen Sie li mit JavaScript: Erstellen Sie zuerst eine HTML-Beispieldatei; erstellen Sie dann den li-Tag-Inhalt und verwenden Sie schließlich die Funktion „op[i].onclick = function () {oList[i].remove()...} "Methode Löschen Sie einfach eine Zeile Inhalt im li-Tag.
Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript-Version 1.8.5, DELL G3-Computer
Wie entferne ich LI aus Javascript?
Native Js realisiert das Löschen einer Inhaltszeile im li-Tag
Unter Verwendung von objektorientiertem Denken zur Vervollständigung der Funktion zum Löschen von Käuferinformationen enthält jede Information:
Name (Name)
Geschlecht (Geschlecht)
Telefonnummer (Nummer)
Provinz (Provinz)
setzt die folgenden Anforderungen um:
kann keine Bibliotheken von Drittanbietern ausleihen und muss mit nativem Code implementiert werden.
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.
Vollständiger Code:
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<!--code here-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
<meta name="format-detection" content="telephone=no">
<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
Contact.prototype.init = function () {
var op = document.getElementsByClassName("user-delete"); var oUl = document.querySelector("#J_List"); var oList = oUl.querySelectorAll("li");
for (var i = 0; i < op.length; i++) {
(function (i) {
op[i].onclick = function () {
oList[i].remove();
console.log(i);
}
})(i);
}
} new Contact(); </script></body></html>Empfohlenes Lernen: „Javascript-Tutorial für Fortgeschrittene“
Das obige ist der detaillierte Inhalt vonSo entfernen Sie Li in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!