使用動態創建的按鈕刪除 div
[英]Remove a div using a button created dynamically
問題描述
我正在用 JavaScript 做一個待辦事項列表。 我想刪除一個帶有按鈕的 div，它是用 JavaScript 動態創建的。 我已經為該按鈕分配了一個ID ，但我不知道如何訪問它。 任何人都可以幫忙嗎？ 我的代碼如下：-
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>
2 個解決方案
解決方案1
0 2016-12-04 16:24:09
您已經使用帶有類語法的查詢選擇器，嘗試添加 # 它應該按預期正常工作
var userEntry = document.querySelector('#newIn').value;
解決方案2
0 2016-12-06 13:35:29
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); button.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>
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>
使用jQuery刪除動態創建的元素（帶有單獨的刪除按鈕）
[英]Remove dynamically created elements (with separate delete button) using jquery
刪除父容器 div 的按鈕對動態創建的 div 不起作用
[英]Button to remove parent container div doesn't work on dynamically created divs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.