1
JavaScriptでToDoリストを実行しています。私はボタンを使ってdivを削除します。これはJavaScriptで動的に作成されます。。すでにそのボタンに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の' イベントを使用していないでしょうか？ –
onclickはそれを行うもう一つの方法です。 Clickイベントが正常に機能しています.iで入力した値をdivに挿入します。 –
innerHtmlではなくtext属性を使用してください。 –