본문 바로가기
카테고리 없음

18강. DOM을 활용하여 신규요소 제거하기

by 나도처음이야 2024. 8. 11.
반응형

 

 

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

 

반응형
저작자표시 비영리 변경금지

댓글

나도처음이야님의
글이 좋았다면 응원을 보내주세요!

티스토리툴바