바닐라 코드 1 → XXX
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { border: 1px solid black; padding: 10px; } </style> </head> <body> <h1>삭제하기</h1> <button onclick="del()">remove로 삭제하기</button> <div class="box" id="outerBox"> <div class="box" id="innerBox1"> 내부박스1 </div> </div> <script> function del(){ let el = document.querySelector("#innerBox1"); el.remove(); } </script> </body> </html>
id값 중복되지 않게 하자!
이제 클릭할 때마다 id가 n++로 카운트 되면서 올라갈 것
[ id값 중복되지 않게 하는 코드 실습 ]
방법 1로 삭제 해보자 (하지마라!!!!!!!!!)
<script> let n = 0; // 최초의 시작은 0으로 해서 function addAppend() { n++; // ++코드를 여기에 쓰던지 let newString = `<div class="box" id="innerBox${n}">내부박스${n}</div>`; $("#outerBox").append(newString); // 이벤트 $(`#innerBox${n}`).click(() => { alert(`클릭됨${n}`); }); } 이벤트는 추가될 때 걸려야 함
$(#innerBox${n}).click(() => { ... })는 이벤트 핸들러 (=이벤트다) 이 코드는 #innerBox${n}라는 아이디를 가진 요소가 클릭되었을 때 실행될 동작을 정의
[ 화면 확인 ]
클릭하면 alert 뜸
CSR 에서는 이벤트를 뿌릴 때 바로 걸어야 한다. (이벤트를 미리 걸어놓을 수 없다)
-> 추가될 때 이벤트가 걸려야 한다!
방법 2) onClick 을 사용!
전체 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <title>Title</title> <style> .box { margin-top: 10px; border: 1px solid black; padding: 10px; } </style> </head> <body> <h1>추가, 삭제</h1> <button onclick="addAppend()">append로 추가하기</button> <div class="box" id="outerBox"> </div> <script> let n = 0; function addAppend() { n++; let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`; $("#outerBox").append(newString); } function del(n) { alert(`번호 : ${n}`); } </script> </body> </html>
function del(n)은 변수가 아닌 문자열이라서 fix되어 고정된 숫자를 받을 것이다 제일 처음 1이 만들어져서 화면에 뿌려져 있을 것. 그다음에 돌면 del1, del2, del3 이런식으로 n++ 되겠지 그렇게 문자열로 fix 되는 것임
[ 화면 확인 ]
아이디 거는 것보다 onclick이 훨씬 좋다. 이제 삭제할 id 구분이 가능해졌죠?
id 나왔으니 이제 진짜 삭제하자 (꼭 기억해야할 코드) ★
CSR을 만들 때 제일 중요한 건 id 값!! → 나중에 실제로 만들 때는 db에서 pk키를 선택
Share article