dodanie przycisku usuwania w javascript

Question

Próbuję dodać przyciski usuwania w javascript, który usuwa się po kliknięciu, ale nie wiem jak. Oto mój kod:

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

Przepraszam, jestem całkiem nowy w Javascript. Każda pomoc jest mile widziana. Dziękuję Ci

javascript html

0

user672518 24 marzec 2020, 10:50

Answer 1

Wartość onclick powinna być funkcją, wywołujesz funkcję podczas wykonywania przypisania.

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

Ponadto thisDiv jest lokalne dla displayPost(), nie możesz go używać w del(). Musisz użyć x.parentElement.

Masz wiele innych literówek i drobnych błędów w del(), zobacz poniższe poprawki.

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>

1

Barmar 24 marzec 2020, 08:11

Answer 2

Jeśli dobrze odpowiem na twoje pytanie, może ci to pomóc.

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

0

Nikhil Singh 24 marzec 2020, 08:37

dodanie przycisku usuwania w javascript

2 odpowiedzi

Podobne pytania

Nowe pytania