Home >Web Front-end >Front-end Q&A >How to remove li in javascript
How to remove li in javascript
- 藏色散人Original
- 2021-07-17 14:32:342920browse
Javascript method to remove li: First create an HTML sample file; then create the li tag content; finally pass "op[i].onclick = function () {oList[i].remove().. .}" method can delete one line of content of the li tag.
The operating environment of this article: windows7 system, javascript version 1.8.5, DELL G3 computer
How to remove li from javascript?
Native Js implementation to delete a line of content in the li tag
##Use object-oriented Idea completes the buyer information deletion function. Each piece of information includes:
Name (name) Gender (sex)
Phone number (number)
Province (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.
Completed 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> Recommended study: "javascript Advanced Tutorial"
The above is the detailed content of How to remove li in javascript. For more information, please follow other related articles on the PHP Chinese website!