Maison > Article > interface Web > Comment supprimer Li en javascript
Comment supprimer Li en javascript
- 藏色散人original
- 2021-07-17 14:32:342887parcourir
Comment supprimer li avec JavaScript : créez d'abord un exemple de fichier HTML ; puis créez le contenu de la balise li ; enfin utilisez la fonction "op[i].onclick = () {oList[i].remove()...} " Méthode Supprimez simplement une ligne de contenu dans la balise li.
L'environnement d'exploitation de cet article : système windows7, javascript version 1.8.5, ordinateur DELL G3
Comment supprimer li de javascript ?
Native Js réalise la suppression d'une ligne de contenu dans la balise li
En utilisant la pensée orientée objet pour compléter la fonction de suppression des informations sur l'acheteur, chaque information contient :
Nom (nom)
Sexe (sexe)
Numéro de téléphone (numéro)
Province (province)
met en œuvre les exigences suivantes :
ne peut emprunter aucune bibliothèque tierce et doit être implémenté en utilisant du code natif.
En combinaison avec la structure de code de base donnée, ajoutez le code dans le code 2 ci-dessous pour compléter la fonction de suppression des informations de l'acheteur. Notez que cette page doit être clairement affichée sur le téléphone mobile.
Le code js peut être ajusté arbitrairement, par exemple, il peut être complété en utilisant le code es6.
Code terminé :
<!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>Apprentissage recommandé : "Tutoriel avancé javascript"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!