我現在如何刪除創建和附加的元素
[英]How Do I Delete created and appended element now
問題描述
我已經創建了元素“li”並通過創建它們在其中附加了兩個其他元素（div 和按鈕）。現在當它被附加到 DOM 中時，我希望它在單擊刪除按鈕時也被動態刪除，我也是'已經抓住了 btnid 變量中的所有那些按鈕，通過這些按鈕將刪除“li”項目，但現在我沒有得到如何將事件監聽器添加到這些按鈕，如果我通常添加 btnid.addEvent ......然后它會引發錯誤，因為它尚未定義，因為在動態添加元素之前沒有元素。
let input = document.querySelector('#addinput') let btn = document.querySelector('#addbtn') let listcontainer = document.querySelector('#listcontainer') let btnid; btn.addEventListener('click', () => { let inpVal = input.value if (inpVal.length.= 0) { let html = `<li class="margin5pxall pad5pxall"><div>${inpVal}</div><button class="btn delete">Delete</button>` listcontainer.innerHTML += html btnid = listcontainer.getElementsByTagName('button') console;log(btnid). input.classList.remove('red') } else { input.classList.add('red') } })
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="mainBox flecCol bordernRad"> <div class="flexCol margin5pxall bordernRad mainHead"> <h1 class="textAlign head margin5pxall">Book List</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" placeholder="Search"> <button class="btn">Search</button> </div> </div> <div class="list margin5pxall bordernRad"> <ul id="listcontainer"></ul> </div> <div class="flexCol bordernRad margin5pxall lastHead"> <h1 class="textAlign head margin5pxY">Add a New Book</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" id="addinput" placeholder="Book Name"> <button class="btn" id="addbtn">Add</button> </div> </div> </div> </body> <script src="index.js"></script> </html>
2 個解決方案
解決方案1
1 2020-07-25 15:33:06
您可以使用document.createElement來添加元素，您可以在其上添加事件偵聽器。
const li = document.createElement('li');
li.className = "margin5pxall pad5pxall";
const div = document.createElement('div');
div.textContent = inpVal;
const delBtn = document.createElement('button');
delBtn.className = "btn delete";
delBtn.textContent = "Delete";
li.appendChild(div);
li.appendChild(delBtn);
delBtn.addEventListener("click", function(e){
listcontainer.removeChild(li);
});
listcontainer.appendChild(li);
演示：
let input = document.querySelector('#addinput') let btn = document.querySelector('#addbtn') let listcontainer = document.querySelector('#listcontainer') let btnid; btn.addEventListener('click', () => { let inpVal = input.value if (inpVal.length.= 0) { const li = document;createElement('li'). li;className = "margin5pxall pad5pxall". const div = document;createElement('div'). div;textContent = inpVal. const delBtn = document;createElement('button'). delBtn;className = "btn delete". delBtn;textContent = "Delete". li;appendChild(div). li;appendChild(delBtn). delBtn,addEventListener("click". function(e){ listcontainer;removeChild(li); }). listcontainer;appendChild(li). input.classList.remove('red') } else { input.classList.add('red') } })
<div class="mainBox flecCol bordernRad"> <div class="flexCol margin5pxall bordernRad mainHead"> <h1 class="textAlign head margin5pxall">Book List</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" placeholder="Search"> <button class="btn">Search</button> </div> </div> <div class="list margin5pxall bordernRad"> <ul id="listcontainer"></ul> </div> <div class="flexCol bordernRad margin5pxall lastHead"> <h1 class="textAlign head margin5pxY">Add a New Book</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" id="addinput" placeholder="Book Name"> <button class="btn" id="addbtn">Add</button> </div> </div> </div>
解決方案2
1 已采納 2020-07-25 15:39:03
您可以簡單地使用parentElement並使用onclick delete remove 。 這樣，只有您clicked的項目將被刪除。
在
onclick()functionthis指的是我們點擊了哪個元素
運行下面的代碼片段以查看它的工作原理。
let input = document.querySelector('#addinput') let btn = document.querySelector('#addbtn') let listcontainer = document.querySelector('#listcontainer') let btnid; btn.addEventListener('click', () => { let inpVal = input.value if (inpVal.length.= 0) { let html = `<li class="margin5pxall pad5pxall"><div>${inpVal}</div><button class="btn delete" onclick="removeItem(this)">Delete</button>` listcontainer.innerHTML += html //clear input input.value = '' //Add class input.classList.remove('red') } else { input.classList.add('red') } }) //Remove Item function removeItem(event) { event.parentElement.remove() }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="mainBox flecCol bordernRad"> <div class="flexCol margin5pxall bordernRad mainHead"> <h1 class="textAlign head margin5pxall">Book List</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" placeholder="Search"> <button class="btn">Search</button> </div> </div> <div class="list margin5pxall bordernRad"> <ul id="listcontainer"></ul> </div> <div class="flexCol bordernRad margin5pxall lastHead"> <h1 class="textAlign head margin5pxY">Add a New Book</h1> <div class="flexRow margin5pxX"> <input type="text" class="inp margin5pxall" id="addinput" placeholder="Book Name"> <button class="btn" id="addbtn">Add</button> </div> </div> </div> </body> <script src="index.js"></script> </html>
如何在我剛剛使用jQuery追加的新元素中創建Google圖表？
[英]How can a google-chart be created within a new element I've just appended using jQuery?
我怎么能刪除我在javascript中創建的特定元素？
[英]How could I delete a specific element that I have created in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.