adding delete button in javascript

Question

I'm trying to add delete buttons in javascript which deletes itself on-click yet I don't know how. Here's my code:

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

Sorry I'm pretty new to Javascript. Any sort of help is appreciated. Thank you

Delete mean hide?

Manjuboyz
– Manjuboyz

2020-03-24 07:51:55 +00:00
Commented Mar 24, 2020 at 7:51 — Manjuboyz
– Manjuboyz, Commented Mar 24, 2020 at 7:51

Barmar · Accepted Answer · 2020-03-24 08:11:59Z

The value of onclick should be a function, you're calling the function when you do the assignment.

trash.onclick = function() { del(this) };

Also, thisDiv is local to displayPost(), you can't use it in del(). You need to use x.parentElement.

You have a bunch of other typos and minor mistakes in del(), see the corrections below.

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>

Nikhil Singh · Accepted Answer · 2020-03-24 08:37:51Z

If I got your question right, this might help you.

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

Collectives™ on Stack Overflow

adding delete button in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related