자바스크립트 질문이요
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" id="a">
<input type="text" id="b">
<button onclick="btn()">클릭</button>
<div id="wrapper"></div>
<script>
function btn() {
var x = document
.getElementById('a')
.value;
var y = document
.getElementById('b')
.value;
document.getElementById('wrapper').innerHTML = "<table><tr><td>"+ x +"</td><td>"+ y +"</td></tr></table>";
}
</script>
</body>
</html>
이거 출력되면 출력 값 뺴고 기존에 있는 input문 하고 button html 사라지게 구현 못할까요?
답변 1
참조하세요.
<input type="text" id="a" class="del">
<input type="text" id="b" class="del">
<button class="del" onclick="btn()">클릭</button>
<script>
function btn() {
var x = document.getElementById('a').value;
var y = document.getElementById('b').value;
document.getElementById('wrapper').innerHTML = "<table><tr><td>"+ x +"</td><td>"+ y +"</td></tr></table>";
var dels = document.querySelectorAll(".del");
for (var i=0; i<dels.length; i++){
document.body.removeChild(dels[i]);
}
}
</script>
