<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="target">특정태그 삭제 remove</div>
<button type="button" id="btn">특정태그삭제</button>
<script>
var target = document.querySelector(".target");
var btn = document.getElementById("btn");
btn.onclick = function() {
target.remove();//
}
</script>
<hr>
<button type = "button" id="add">추가하기</button>
<button type = "button" id="remove">삭제하기</button>
<ul class="list">
</ul>
<script>
var add = document.getElementById("add");
var remote = document.getElementById("remove");
var list = document.querySelector(".list");
var count = 1;
add.onclick = function() {
var li = document.createElement("li");
var a = document.createElement("a");
a.href = "#";
a.innerHTML = count++ + " .홍길동";
li.appendChild(a); //li자식으로 a추가
list.appendChild(li); //list자식으로 li추가
}
//삭제하기
remove.onclick = function() {
list.removeChild(list.firstElementChild);
}
</script>
</body>
</html>
여기서 삭제를 누른다면?
무조건 첫번째가 삭제된다.
부모,형제노드 선택하기
parentElement , siblingEliment 를 사용한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="list">
<li>1.홍길동</li>
<li>2.이순신</li>
<li>3.홍길자</li>
<li>4.홍길순</li>
</ul>
<script>
var list = document.querySelector(".list");
//console.log(list.children); //자식들을 전부 얻는다.
//console.log(list.children[0]); //첫번재 자식
//console.log(list.children[2]); //세번째 자식
// console.log(list.firstChild);//첫번째 자식 - 태그 사이에 들거나 white space 도 선택이 됨 ( 사용안함)
// console.log( list.firstElementChild);//첫번째 자식 - 엘리먼트형태만 선택
// console.log(list.children[1].nextElementSibling); 이순신의 다음형제 엘리먼트
// console.log(list.children[1].previousElementSibling); 이순신의 이전형제 엘리먼트
var target = document.querySelector("li"); //li태그
console.log(target);
console.log(target.parentElement); //ul
console.log(target.parentElement.parentElement); //body
console.log(target.parentElement.parentElement.parentElement); //html
</script>
</body>
</html>
특정 리스트만 삭제하고 싶을 때는?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body>.head {
font-size: 25px;
font-style: italic;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class='head'>
할일삭제 기능은 button을 생성할 때 이벤트를 주면 됩니다.<br>
input은 지우는게 아니라 , display:none으로 제어하세요<br>
할일 목록만들기<br>
</div>
<div class="hi">
</div>
<div class="first">
<input type="text" id="name" placeholder="이름을 입력하세요">
<button type="button" id="btn1">확인</button>
</div>
<div class="second">
<input type="text" id="todo" placeholder="당신의 할 일을 적으세요">
<button type="button" id="btn2">확인</button>
</div>
<ul class="list">
</ul>
<script>
var first = document.querySelector(".first");
var hi = document.querySelector(".hi");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function () {
var name = document.getElementById("name");
if (name.value.length == 0) {
} else {
first.style.display = 'none';
hi.innerHTML = name.value + "님 안녕하세요";
hi.style.fontWeight = 'bold';
}
}
btn2.onclick = function () {
var todo = document.getElementById("todo");
var list = document.querySelector(".list");
var li = document.createElement("li");
var btn = document.createElement("input");
btn.type = "button";
li.innerHTML = todo.value;
todo.value ="";
btn.value = 'X';
btn.onclick = function() {
li.remove();
}
list.appendChild(li);
li.appendChild(btn);
}
</script>
</body>
</html>
css하기에서의 X를 누르면
css하기가 사라진다.
'JS > JS-event' 카테고리의 다른 글
| BOM -네비게이터 객체 (0) | 2024.02.05 |
|---|---|
| BOM - history (0) | 2024.02.05 |
| BOM - timeout (0) | 2024.02.05 |
| 요소생성 - 노드생성 및 추가 (0) | 2024.02.05 |
| BOM -인터벌예제 (0) | 2024.02.05 |
