먼저 동적테이블을 통해 테이블 행을 추가 & 삭제를 구현해야한다.

기본적으로 아래와 같이 테이블 뼈대가 있고

추가 버튼을 누르면 아래와 같이 행이 추가되고

질문2의 [삭제 버튼]을 클릭하면 다시 첫번째 사진처럼 될것이다.

>❓자바스크립트로 동적테이블을 어떻게 구현할까?

> 🔔 $("추가할 위치").append('추가할 Html 코드');

나는 설문지 질문 table id를 이용했다.
그리고 append할 때 바로 코드를 넣어도 되지만 defaultHtml을 따로 만든 이유는..
코드의 가독성을 높이기 위해!
코드가 길면 기수록 defaultHtml이란 변수에 +=하고 html 태그대로 줄을 맞쳐주어야 나중에 유지보수하기 편하다.

> 🔔 버튼 클릭 이벤트 함수 Jquery $("#버튼id").click(function() {});

버튼 클릭 이벤트를 거는데는 여러 방법이 있는데 크게 3가지로 볼수있다.
HTML, JavaScript, JQuery

방법1) HTML onclick 속성 이용

그리고 .js 파일에서 function addQuest() {} 선언

방법2-1) JS onclick 속성 이용

방법2-2) JS addEventListener() 이용

방법3-1) Jquery $("#버튼Id").on('click',function() ...

방법3-2) **Jquery $("버튼Id").click(function(), ...

> ❓Jquery .on VS .click

이 둘의 차이점이 뭘까 궁굼했다.
동적으로 추가하다 부딪히는 문제 중 애먹었던 문제는 바로 정적으로 생성된 태그는 event가 먹지만 동적으로 생성된 태그는 event가 안먹는다는것이다.
.on과 .click이 100% 해결책은 아니지만 이것도 해결해야 되는 것 중 하나였다!

"메모리" 상에서는 .on('click')이 메모리를 덜먹고 동적으로 생성되는 요소들이 잘 작동된다.

.click()을 사용하면 개별 핸들러를 필요로 해서 메모리 사용량이 증가된다.
그리고 .click()을 사용하면 rebind 해주지 않는 이상 기존의 핸들러가 먹히지 않아 동작 안한다.

참고로!
.on()은 반대로 .off()가 있다.
.off()는 기존에 첨부된 이벤트 핸들러가 제거된다.
더 응요하면 제거 동시에 새로운 click 이벤트 핸들러를 추가할 수 있다.
$("#id").off().on('click', function() {})

자세한 코드는 여기 github 주소로!
👉 https://github.com/HuiEun-Lim/JEB-Survey