Maison > Article > interface Web > Comment supprimer Li en javascript
Comment supprimer Li en javascript
- 藏色散人original
- 2021-05-11 16:17:203994parcourir
Comment supprimer li en JavaScript : obtenez d'abord toutes les balises li ; puis déterminez si une certaine balise li est cliquée et enfin supprimez la balise li via la suppression.
L'environnement d'exploitation de cet article : système Windows7, version javascript1.8.5&&html5, ordinateur Dell G3.
JS implémente la suppression des balises li
En utilisant l'orientation objet en pensant compléter la fonction de suppression des informations de l'acheteur, chaque élément d'information comprend :
- Nom
- Numéro de téléphone
- Numéro de téléphone
- Province
Répondez aux exigences suivantes :
Vous ne pouvez pas emprunter de bibliothèques tierces et devez utiliser du code natif pour les implémenter.
Combiné avec la structure de code de base donnée, ajoutez le code dans les deux codes 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 de base :
<!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>Notez que pour afficher clairement cette page sur les téléphones mobiles , vous devez utiliser des balises méta responsives :
<meta name="viewport" content="width = device-width,initial-scale=1">
Idée :
Récupérez d'abord toutes les balises li, puis déterminez sur quelle balise li vous avez cliqué, puis supprimez l'élément après avoir cliqué.
La fonction Contact a été donnée dans le code de base, et la méthode init doit être ajoutée à la fonction :
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();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!