바닐라 코드 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
