포스트

13. 요소 추가 제거

게시
By Kim Jung Wook 3 분읽는 시간

추가 버튼 클릭 동작

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[html]
<div class="container"><!-- 첫행은 무조건 존재(삭제 X) -->
  <div class="row">
    <input type="number" class="in">
  </div>

  <!-- 두번째 행 이후부터는 삭제 가능 -->
  <!--
  <div class ="row">
    <input type="number" class="in">
    <span class="remove">&times;</span>
  </div>
  이렇게 추가되는것은 너무 비효율적이다
  -->
</div>

<button id="add">추가</button>
<button id="calc">계산</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

[css]
/* 한 줄 */
.row{
  margin : 5px 0;
  display : flex;
  align-items : center;
}

/* input 요소 */
.in{
  width : 100px;
  margin-right : 5px;
}

/* x버튼 */
.remove{
  border: 1px solid black;
  border-radius : 50%;
  
  width : 18px;
  height : 18px;
  
  display : flex;
  justify-content : center;
  align-items : center;
  
  box-sizing : border-box;
  padding-bottom : 4px;
  
  cursor : pointer;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

[js]
// 추가 버튼 클릭 시 동작
document.getElementById("add").addEventListener("click", function(){
  // <div class ="row">
  //	 <input type="number" class="in">
  //	 <span class="remove">&times;</span>
  // </div>

  // div 요소 생성
  const div = document.createElement("div");

  // div에 row class 추가
  div.classList.add("row");

  // ---------------------------------------

  // input요소 생성
  const input = document.createElement("input");

  // input에 in class 추가
  input.classList.add("in");

  // * 요소에 속성을 추가하거나 변경할 때 사용하는 함수
  // 요소.setAttribute("속성명", "속성값");
  // <-> 요소.removeAttribute("속성명") : 속성제거

  // input.setAttribute("type","number");

  // ---------------------------------------

  // span 요소 생성
  const span = document.createElement("span"); // 동적으로 요소를 생성

  // span에 remove class 추가
  span.classList.add("remove");

  // span에 &times; 추가
  span.inner HTML = "&times;"

  // span에 click 이벤트 동적 추가(동적 요소에 이벤트 추가)
  span.addEventListener("click", function(){
    // 클릭된 x버튼의 부모 요소(div.row)를 삭제
    // 요소.remove() : 해당 요소를 제거
    this.parentElement.remove();
  })

  // ---------------------------------------

  // div > input, span 조립
  div.append(input, span);

  // .container에 div를 마지막 자식으로 추가
  document.querySelector(".container").append(div);

  input.focus(); // 화면에 추가된 input에 포커스
});

// 계산 버튼 클릭 시
// (클릭으로 함수가 호출될 때 그때 상태의 html 요소의 상태를 읽어오기 때문에
// 정적이벤트로 작성해도 된다)
// input 요소에 작성된 값을 모두 얻어와 합한 후 출력

document.getElementById("calc").addEventListener("click", function(){
  const inputList = document.getElmentsClassname("in");

  let sum = 0;
  
  for(let input of inputList){
    sum += Number(input.value); // input 요소에 작성된 값 누적
  }

  alert("합계 : " + sum);
})
KH 학원 공부, JS
JS