javascript - 在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 = function() { del(this) };

此外，thisDiv 是 displayPost() 的本地变量，您不能在 del() 中使用它。您需要使用x.parentElement。

您在 del() 中还有很多其他拼写错误和小错误，请参阅下面的更正。

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 = function() {del(this);};
}

function del(x){
    var delTrash = document.getElementsByClassName("post-trash");
    var delDate = document.getElementsByClassName("post-date");
    var thisDiv = x.parentElement;
    var index = Array.from(delTrash).indexOf(x);
    thisDiv.removeChild(delTrash[index]);
    thisDiv.removeChild(delDate[index]);
}

<div id="posts">
</div>
<button onclick="displayPost()">Add post</button>