Estoy creando una aplicación baisc CRUD y tengo problemas con mis botones de eliminar y editar. Puedo agregar el botón Eliminar al contenedor principal pero no puedo agregarlo al comentario dentro del contenedor.

 let submitBtn = document.getElementById("submitBtn"); let commentContainer = document.getElementById("commentsContainer") //Delete Button let deleteBtn = document.createElement("button"); deleteBtn.classList.add("deleteBtn") deleteBtn.innerText = "Delete" submitBtn.addEventListener("click" , function postComment() { let comment = document.getElementById("comment").value let newComment = document.createElement("div") if(comment == ""){ //No comment typed alert alert("Please type a comment!") } else { //Inserting comment into container commentContainer.appendChild(newComment) newComment.classList.add("comment") //Line in question newComment.appendChild(deleteBtn) //commentContainer.appendChild(deleteBtn) works just fine //Setting Comment text newComment.innerText = comment; } deleteBtn.addEventListener("click" ,() =>{ //Deleteing all comment attributes newComment.remove() deleteBtn.remove() }) })

El botón funciona, sin embargo, no puedo entender por qué cuando trato de agregarlo al div que contiene el comentario, JS no crea el botón, pero cuando lo agrego al div principal de comentarios, funciona bien.

Cualquier y toda ayuda es muy apreciada. ¡Gracias!