자바스크립트에서 li을 삭제하는 방법
- 藏色散人원래의
- 2021-05-11 16:17:204046검색
자바스크립트에서 li를 삭제하는 방법: 먼저 모든 li 태그를 가져온 다음 특정 li 태그가 클릭되었는지 확인하고 마지막으로 제거를 통해 li 태그를 삭제합니다.
이 기사의 운영 환경: windows7 시스템, javascript1.8.5&&html5 버전, Dell G3 컴퓨터.
JS는 li 태그 삭제를 구현합니다.
객체 지향적 사고를 사용하여 구매자 정보 삭제 기능을 완성합니다. 각 정보에는
- 이름
- 전화
- 전화번호가 포함됩니다.
- Province
다음 요구 사항을 충족해야 합니다.
타사 라이브러리를 빌릴 수 없으며 이를 구현하려면 네이티브 코드를 사용해야 합니다.
제공된 기본 코드 구조와 결합하여 아래 두 코드에 코드를 추가하면 구매자 정보 삭제 기능이 완료됩니다. 이 페이지는 휴대폰에 명확하게 표시되어야 합니다.
js 코드는 임의로 조정할 수 있습니다. 예를 들어 es6 코드를 사용하여 완성할 수 있습니다.
기본 코드:
<!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>이 페이지를 휴대폰에서 명확하게 표시하려면 반응형 메타 태그를 사용해야 합니다.
<meta name="viewport" content="width = device-width,initial-scale=1">
아이디어:
먼저 모든 li 태그를 가져온 다음 어떤 li 태그가 무엇인지 결정하세요. 클릭 후 요소를 제거하려면 클릭하세요.
Contact 함수는 기본 코드에 주어져 있고, 함수에 init 메소드를 추가해야 합니다:
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();추천 학습: "javascript Advanced tutorial"
위 내용은 자바스크립트에서 li을 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.