Home > Article > Web Front-end > How to delete li in javascript
How to delete li in javascript
- 藏色散人Original
- 2021-05-11 16:17:204060browse
How to delete li in javascript: first get all li tags; then determine whether a certain li tag is clicked; finally delete the li tag through remove.
The operating environment of this article: windows7 system, javascript1.8.5&&html5 version, Dell G3 computer.
JS implements the deletion of li tags
##Using object-oriented thinking to complete Buyer information deletion function, each piece of information includes:- Name
- Phone
- Phone number
- Province
Achieve the following requirements: You cannot borrow any third-party libraries and need to use native code to implement them.
Combined with the basic code structure given, add the code in the two code here below to complete the deletion function of buyer information. Note that this page must be clearly displayed on the mobile phone.
The js code can be adjusted arbitrarily, for example, it can be completed using es6 code.
<!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>
Note that to display clearly on mobile phones, responsive meta tags should be used:
<meta name="viewport" content="width = device-width,initial-scale=1">Idea:
The Contact function has been given in the basic code, and the init method needs to be added to the function:
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(); Recommended learning: "javascript Advanced Tutorial"
The above is the detailed content of How to delete li in javascript. For more information, please follow other related articles on the PHP Chinese website!