1 回答

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊
用js渲染動(dòng)態(tài)元素時(shí),有幾個(gè)概念是必須要了解的。
你的按鈕有一個(gè)
click
監(jiān)聽(tīng)器.close
。該偵聽(tīng)器永遠(yuǎn)不會(huì)觸發(fā),因?yàn)樵搨陕?tīng)器僅與您的初始 DOM 相關(guān)。但是您的關(guān)閉按鈕是動(dòng)態(tài)呈現(xiàn)的,這意味著偵聽(tīng)器與您的按鈕無(wú)關(guān)。通過(guò)附加onclick
到按鈕并創(chuàng)建一個(gè)函數(shù)可以輕松解決這個(gè)問(wèn)題。(示例如下)我檢查了你的代碼,你不必使用 id 機(jī)制來(lái)刪除/隱藏你的
card
元素(除非你需要觸發(fā)POST
請(qǐng)求),你可以使用parentNode
(示例如下)
我對(duì)您的代碼做了一些簡(jiǎn)單的更改:
$(".create").click(function(){
let element = `
<div id="card" class="card col- 3" style="width:18rem;style="margin-right=3%; margin-right=3%"><img src="..." class="card-img-top" alt="..." id="image"+String(cnt)><div class="card-body"><h5 class="card-title" id="title" contentEditable="true">Card title</h5><p class="card-text" id="desc" contentEditable="true">Some quick example text to build on the card title and make up the bulk of the' card\'s content.</p><a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a><a href="#" class="close" onclick='deleteCard(this)'>Delete</a></div></div>`;
document.getElementById("lastRow").innerHTML+=element;
});
function deleteCard(delBtn){
delBtn.parentNode.parentNode.hidden = true
}
請(qǐng)注意我添加的函數(shù)和啟用隱藏操作的 onclick。這是一個(gè)編碼鏈接,供您自行測(cè)試我所做的事情。
希望這對(duì)您有所幫助,任何其他問(wèn)題都會(huì)很好:)
添加回答
舉報(bào)