在javascript中添加删除按钮

Question

我正在尝试在 javascript 中添加删除按钮，该按钮会在单击时自行删除，但我不知道如何操作。这是我的代码：

<script>

function displayPost(){

var thisDiv = document.getElementById("posts");

var theDate = document.createElement("P");

theDate.classList.add("post-date");

var trash= document.createElement("BUTTON");

trash.classList.add("post-trash");

trash.innerHTML = '<i class="fa fa-window-close" aria-hidden="true"></i>';

thisDiv.appendChild(theDate);

thisDiv.appendChild(trash);

theDate.innerHTML = new Date();

trash.onclick = del(this);

}

function del(x){

var delTrash = document.getElementsByClassName("post-trash");

var delDate = document.getElementsByClassName("post-date");

var index = deltrash.indexof(x);

thisdiv.removeChild(hideTrash[index]);

thisdiv.removeChild(delDate[index]);

}

</script>

抱歉，我对 Javascript 还很陌生。任何形式的帮助表示赞赏。谢谢

Answer 1

的值onclick应该是一个函数，您在进行赋值时调用该函数。trash.onclick&nbsp;=&nbsp;function()&nbsp;{&nbsp;del(this)&nbsp;};另外，thisDiv是本地的displayPost()，你不能在 中使用它del()。你需要使用x.parentElement.您在 中还有很多其他拼写错误和小错误del()，请参阅下面的更正。function displayPost() {&nbsp; var thisDiv = document.getElementById("posts");&nbsp; var theDate = document.createElement("P");&nbsp; theDate.classList.add("post-date");&nbsp; var trash = document.createElement("BUTTON");&nbsp; trash.classList.add("post-trash");&nbsp; trash.innerHTML = '<i class="fa fa-window-close" aria-hidden="true"></i>';&nbsp; thisDiv.appendChild(theDate);&nbsp; thisDiv.appendChild(trash);&nbsp; theDate.innerHTML = new Date();&nbsp; trash.onclick = function() {del(this);};}function del(x){&nbsp; &nbsp; var delTrash = document.getElementsByClassName("post-trash");&nbsp; &nbsp; var delDate = document.getElementsByClassName("post-date");&nbsp; &nbsp; var thisDiv = x.parentElement;&nbsp; &nbsp; var index = Array.from(delTrash).indexOf(x);&nbsp; &nbsp; thisDiv.removeChild(delTrash[index]);&nbsp; &nbsp; thisDiv.removeChild(delDate[index]);}<div id="posts"></div><button onclick="displayPost()">Add post</button>

Answer 2

如果我答对了你的问题，这可能会对你有帮助。<div class="container">&nbsp; &nbsp; <!-- some posts with delete button -->&nbsp; &nbsp; <div class="post">&nbsp; &nbsp; &nbsp; &nbsp; Post One&nbsp; &nbsp; &nbsp; &nbsp; <button class="delete-post">Delete Post</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="post">&nbsp; &nbsp; &nbsp; &nbsp; Post Two&nbsp; &nbsp; &nbsp; &nbsp; <button class="delete-post">Delete Post</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="post">&nbsp; &nbsp; &nbsp; &nbsp; Post Three&nbsp; &nbsp; &nbsp; &nbsp; <button class="delete-post">Delete Post</button>&nbsp; &nbsp; </div></div><script>&nbsp; &nbsp; window.onload = () => {&nbsp; &nbsp; &nbsp; &nbsp; let postsDelBtn = document.getElementsByClassName("delete-post");&nbsp; &nbsp; &nbsp; &nbsp; console.log(postsDelBtn)&nbsp; &nbsp; &nbsp; &nbsp; for(let i = 0; i < postsDelBtn.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; postsDelBtn[i].addEventListener('click', (event) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.target.parentNode.remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script>