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();
    }
})

CodePudding user response：

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>

CodePudding user response：

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);
})

CodePudding user response：

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 >Comment 1</p>
    <p >Comment 2</p>
    <p >Comment 3</p>
    <p >Comment 4</p>
    <p >Comment 5</p>
    <p >Comment 6</p>
</div>