17강. DOM을 활용하여 신규요소 추가하기
16강. 웹 페이지를 동적으로 만들기15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수
soo0100.tistory.com
지난 시간에는 신규요소를 추가해보았다.
이번에는 추가된 요소들을 클릭할 때마다 제거하는 코드를 짜본다.
1. 화면을 구성한다.
- 버튼을 클릭하면 요소를 추가하는 addItem() 함수를 만든다.
- 추가될 요소의 영역을 div로 선언한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM을 활용하여 신규 요소 추가하기</title>
</head>
<body>
<input type="button" value="추가" onclick ="addItem();">
<div id="textArea">
<p>이곳에 신규 요소가 생성됨</p>
</div>
</body>
</html>
2. 자바스크립트 코드에서는
버튼 클릭 시 요소를 추가하는 기능 과 요소들을 클릭시 삭제하는 기능을 구현한다,
<script>
function addItem(){
var newItem = document.createElement("p");
var temp = Math.floor(Math.random()*100);
newItem.innerText="새 요소" + temp;
// 추가된 요소가 클릭시 deleteItem 함수를 등록함.
newItem.onclick=deleteItem;
var area = document.getElementById("textArea");
area.appendChild(newItem);
}
function deleteItem(){
//자식 요소 지우기
document.getElementById("textArea").removeChild(this);
}
</script>
이전강에서 이미 여러 요소를 추가하는 코드를 addItem() 함수를 만들어서 구현했다.
17강에서 가장 중요시되는 부분은 바로 하나, 요소를 삭제하는 기능이다.
추가된 요소들이 클릭될 때 해당 요소가 지워지게 하려면,
newItem.onclick = deleteItem;
신규요소의 onclick 속성에 deleteItem 함수를 연결시켜 주는 작업이 필요하다.
그다음으로는,
document.getElementById("textArea"). removeChild(this);
removeChild() 함수를 사용해서
자식요소를 삭제해 준다.
여기서 사용된 this라는 키워드는 자기 자신 즉, 새롭게 생성된 요소 그 자신을 말한다.
div 밑에 생성된 여러 요소 중 생성될 때 등록한 그 자신이 삭제된다.
이로써 우리는 HTML 버튼을 이용해 요소를 추가하고, 더불어 요소를 삭제하는 방법까지 만들 수 있게 되었다.
로또 숫자 만들기 with 자바스크립트 (랜덤 함수 활용하기)
로또는 45개로 이루어진 숫자이다.로또 번호 6개가 갑자기 생각이 안난다면, 여러분의 브라우저를 통해서 6개의 랜덤한 숫자를 받을 수 있다.물론 동행복권 사이트 및 다른 방법을 통해서도 할
soo0100.tistory.com
로또 번호 자동 생성하기
지난 시간 PC에 설치된 브라우저에서 로또번호 를 한개씩 생성하는 방법을 알아보았다.이번에는 6개의 숫자를 중복없이 생성하는 방법을 알아본다.실행 결과물은 하기와 같다.로또번호 받기 버
soo0100.tistory.com
19강. 로컬스토리지 사용하기
18강. DOM을 활용하여 신규요소 제거하기17강. DOM을 활용하여 신규요소 추가하기16강. 웹 페이지를 동적으로 만들기15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함
soo0100.tistory.com
댓글