I want to implement "delete comment" option when I click on the comment. However, what I have implemented here deletes comment in the order regardless of what I click and I want it to delete one that I am clicking. I tried using for loop so each one gets different ID with number next to it but it got too complicated to track when someone deletes and adds again. I would greatly appreciate any 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();
}
})
I used target.parentNode, please see snippet below.
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>ids must always be unique on a page. The following shows a solution based on filtering for a common class:
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);
})