data-***
-HTML5 ์ ์ถ๊ฐ๋ Element์ ์์ฑ
-๊ฐ๋ฐ์๊ฐ element์ ์์ฑ๊ฐ์ผ๋ก data๋ฅผ ๋ฃ๊ณ ์ถ์ ๋ ์ฌ์ฉ
-์ฌ์ฉ์ ์ ์ ์์ฑ
์ฌ์ฉ๋ฐฉ๋ฒ์?
data-์์ฑ๋ช
ex) data-age="20"
ex) data-my-name="name ์๋ฌด๊ฑฐ๋"
ex)
<body>
<div id="btns">
<button class="btn" data-num="1">button1</button>
<button class="btn" data-num="2">button2</button>
<button class="btn" data-num="3">button3</button>
<button class="btn" data-num="4">button4</button>
</div>
<h3 id="t1">Text1</h3>
<h3 id="t2">Text2</h3>
<h3 id="t3">Text3</h3>
<h3 id="t4">Text4</h3>
<script src="./remove.js"></script>
</body>
btns.addEventListener("click",function(event){
let btn=event.target;
if(btn.classList.contains("btn")){
let t = btn.getAttribute("data-num");//console.log(t) ๋ฒํผํด๋ฆญํ๋ฉด ์ซ์๋์ด
document.getElementById("t"+t).remove();
// console.log("btn click");
// t3.remove();
}
})
'23. Front-end > 23. html css javascript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| async ํจ์์ await (0) | 2024.08.19 |
|---|---|
| Callback ๊ณผ Promise ์ฐจ์ด ์์๋ณด๊ธฐ, Promise ์ฌ์ฉํ๊ธฐ (ํ ์ค ๋ธ๋ก๊ทธ ์ฐธ๊ณ ) (3) | 2024.07.24 |
| [Javascript] Function ํจ์, Event (0) | 2022.03.03 |
| [JavaScript 2]BOM and DOM, Element ์ ํ, Class ์ ํ์ ๋ฐฐ์ด ,innerHTML, innerTEXT (0) | 2022.03.02 |
| JavaScript (0) | 2022.03.02 |