Quiero implementar la opción "eliminar comentario" cuando hago clic en el comentario. Sin embargo, lo que implementé aquí elimina el comentario en el orden independientemente de en qué haga clic y quiero que elimine uno en el que estoy haciendo clic. Intenté usar for loop para que cada uno obtenga una identificación diferente con un número al lado, pero se volvió demasiado complicado rastrear cuando alguien elimina y agrega nuevamente. Agradecería mucho cualquier idea!
const createComment = () => { // userId let userId = "userId" // getting comment from input const comment = textbox.value; // element = comment + like button const element = document.createElement('p'); element.id = "individualComment"; element.setAttribute("style", "width:430px"); // like const like = document.createElement("input"); like.id = "like"; like.src = "img/navHeart.jpeg"; like.type = "image" like.setAttribute("style", "height: 15px; width: 15px"); like.style.float = 'right'; // creating element and append it element.innerHTML = userId + " " + comment; whereToAdd.appendChild(element); element.append(like); } document.body.addEventListener('click', function (e) { if (e.target.id == 'individualComment') { const element = document.getElementById('individualComment'); element.remove(); } })target.parentNode , vea el fragmento a continuación.
document.body.addEventListener('click', function (e) { if (e.target.id == 'individualComment') { var target = e.target; var parent = target.parentNode; var index = [].indexOf.call(parent.children, target); parent.children[index].remove(); } }) <div> <p id="individualComment">Comment 1</p> <p id="individualComment">Comment 2</p> <p id="individualComment">Comment 3</p> <p id="individualComment">Comment 4</p> <p id="individualComment">Comment 5</p> <p id="individualComment">Comment 6</p> </div>id siempre deben ser únicos en una página. A continuación se muestra una solución basada en el filtrado de una class común:
document.body.addEventListener('click', function (e) { if (e.target.classList.contains( 'individualComment')) { e.target.remove(); } }) <div> <p class="individualComment">Comment 1</p> <p class="individualComment">Comment 2</p> <p class="individualComment">Comment 3</p> <p class="individualComment">Comment 4</p> <p class="individualComment">Comment 5</p> <p class="individualComment">Comment 6</p> </div>let array = [] // your initial array document.body.addEventListener('click', function (e) { //when you click any element this event listner get called //then you check the target element id with the original array element id //Use filter method to filter out only those element whose id not equal to the //target id . So you will get updated array without target element array = array.filter(elem => elem.id !== e.target.id); })