在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>

Answer 2

如果我答对了你的问题，这可能会对你有帮助。

<div class="container">

    <!-- some posts with delete button -->

    <div class="post">

        Post One

        <button class="delete-post">Delete Post</button>

    </div>

    <div class="post">

        Post Two

        <button class="delete-post">Delete Post</button>

    </div>

    <div class="post">

        Post Three

        <button class="delete-post">Delete Post</button>

    </div>

</div>

<script>

    window.onload = () => {

        let postsDelBtn = document.getElementsByClassName("delete-post");

        console.log(postsDelBtn)

        for(let i = 0; i < postsDelBtn.length; i++){

            postsDelBtn[i].addEventListener('click', (event) => {

                event.target.parentNode.remove();

            })

        }

    }

</script>