1
자바 스크립트로 할 일 목록을 만들고 있습니다. JavaScript로 동적으로 생성 된 버튼으로 div를 삭제하고 싶습니다.. 이미 해당 버튼에 id을 할당했지만 액세스 방법을 모르겠습니다. 누구든지 도와 줄 수 있습니까? 아래에 내 코드 : - 당신은 클래스 구문에 사용할 쿼리 선택이동적으로 생성 된 버튼을 사용하여 div를 제거하십시오.
var Addnew = document.querySelector('#add_new');
var myDiv;
var button;
function newDiv() {
var body = document.getElementsByTagName('body')[0];
myDiv = document.createElement('div');
var userEntry = document.querySelector('.newIn').value;
button = document.createElement('button');
myDiv.className = 'item';
myDiv.style.display = 'block';
myDiv.innerHTML = userEntry;
button.style.display = 'block';
button.innerHTML = "Remove";
button.setAttribute('id','Remove');
button.style.marginLeft = '280px';
button.style.background = 'tomato';
button.style.color = 'white';
myDiv.appendChild(button);
body.appendChild(myDiv);
}
document.getElementById('Remove').addEventListener('click', function() {
console.log('done');
});
Addnew.addEventListener('click', function() {
newDiv();
});
document.querySelector('.newIn').addEventListener('keydown', function(e) {
if (e.which == 13) {
newDiv();
}
});.input_box{
text-align: center;
margin-top: 7%;
}
.input_box > input {
width:250px;
}
#add_new{
background-color:rgb(44, 147, 124);
color:white;
width:70px;
margin-left:5px;
}
h1{
text-align: center;
font-family:sans-serif;;
}
.item{
width:270px;
height:35px;
margin-top: 20px;
margin-left:38%;
display: none;
border: 0.5px ridge green;
}
#Remove {
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To-do List</title>
<!-- Css linking -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>To-do list</h1>
<div class="input_box">
<input type="text" class="newIn" placeholder="What do you want to add?" autofocus="autofocus"/>
<button id="add_new">Add</button>
</div>
<div class="item"></div> <button id="Remove"></button>
<script src="main.js" charset="utf-8"></script>
</body>
</html>
당신이 '온 클릭'이벤트를 사용하지할까요? –
onclick은이를 수행하는 또 다른 방법입니다. 클릭 이벤트가 잘 작동합니다 .i div에 사용자가 입력 한 값을 삽입하려고합니다. –
innerHtml이 아닌 text 특성을 사용해야합니다. –