クリックイベントによってボタンを使用してFirebaseからフェッチされた投稿を削除するにはどうすればよいですか？

Question

I Firebaseから正常にフェッチ投稿やそれらのデータは、このようにページにループを経由して表示されていました：

<div class="col s12 m6 l6" id="KQlQlg_Vg6eVWDI19NM"> 
    <div> 
    <span class="modify-post"><span class="edit btn green waves-effect waves-light" title="edit"><i class="fa fa-pencil-square-o"></i></span> 
    <span id="KQlQlg_Vg6eVWDI19NM" class="delete btn red waves-effect waves-light" title="delete"><i class="fa fa-trash-o"></i></span> 
    </span><span class="post_tag"> Birthday </span> 
    <h3 class="post_title">lorem ipsum dolor sit amet</h3> 
    <div class="post_short"> 
     <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum 
     dolor sit amet lorem ipsum dolor sit ametlorem </p> 
    </div><button class="blue btn waves-effect waves-light"><i class="fa fa-align-left"></i> &nbsp; View post </button> 
    <p class="post-details white-text"></p> 
    </div> 
</div> 

したがって、各ポストの<div>はFirebaseでそのポストのIDと同じIDを持っています。今私が持っている問題は、私が作成した削除ボタンを使って投稿を削除することです。それは何も返さず、私のための投稿をデータベースから削除しません。ここで

はそれを実装するための私の試みです：

function deletePost(postId) { 
    var sure = confirm("are you sure to delete this post?"); 
    if (sure) { 
    firebase.database().ref('blog/').child('posts/' + postId).remove().then(function() { 
     alert("post deleted!"); 
    }); 
    } else { 
    alert("Something happened, couldn't delete post. Please try again"); 
    } 
} 

$('span.modify-post>span.delete').click(function(e) { 
    var clickedPostId = e.target.offsetParent.id; 
    alert("you just clicked the post with id " + clickedPostId); 
    deletePost(clickedPostId); 
}); 

は、任意の助けに感謝します。

PS（コメント欄から）：
私はコンソールにそれを貼り付ける際にJavaScriptコードは動作しますが、それはHTMLまたはあなたが持っているそのJavaScriptファイル

Answer 1

でいたとき、それは動作しません。私のコードは、文書の仕上げのロード直後に実行されませんので、あなたのクリックイベントがHTML負荷

<div class="col s12 m6 l6" id="KQlQlg_Vg6eVWDI19NM"> 
    <div> 
    <span class="modify-post"><span class="edit btn green waves-effect waves-light" title="edit"><i class="fa fa-pencil-square-o"></i></span> 
    <span id="KQlQlg_Vg6eVWDI19NM" class="delete btn red waves-effect waves-light" title="delete"><i class="fa fa-trash-o"></i></span> 
    </span><span class="post_tag"> Birthday </span> 
    <h3 class="post_title">lorem ipsum dolor sit amet</h3> 
    <div class="post_short"> 
     <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum 
     dolor sit amet lorem ipsum dolor sit ametlorem </p> 
    </div><button class="blue btn waves-effect waves-light"><i class="fa fa-align-left"></i> &nbsp; View post </button> 
    <p class="post-details white-text"></p> 
    </div> 
</div> 
<script> 
ClickEvent(); 
<script> 
function ClickEvent(){ 
$('span.modify-post>span.delete').click(function(e) { 
    var clickedPostId = e.target.offsetParent.id; 
    alert("you just clicked the post with id " + clickedPostId); 
    deletePost(clickedPostId); 
}); 
} 

Answer 2

後にレンダリングすることは、私はクリックイベントに私のfirebase投稿を削除できなかった理由は、 firebaseがdatabaseから郵便物を取ったとき。これを修正するには、CRUDベースの操作を実行する前にfirebaseが自分のデータをDOM（自分の関数を使用して）にロードするために$(window).load()イベントハンドラ（jQueryの場合）またはwindow.onload()（純粋なjavascriptの場合）を使用できます。ここで

は私のソリューションです：

$(window).load(function() { 
    $('span.modify-post>span.delete').click(function (e) { 
    var clickedPostId = e.target.offsetParent.id; 
    alert("you just clicked the post with id " + clickedPostId); 
    // deletePost(clickedPostId); 
    var sure = confirm("are you sure to delete this post?"); 
    if (sure) { 
     firebase.database().ref('blog/').child('posts/' + clickedPostId).remove().then(function() { 
     alert("post deleted!"); 
     }); 
    } 
    }); 
});