Удаление конкретного комментария из массива (JS)

Question

У меня есть модуль, который отображает массив "posts" (из другого файла .js) в DOM. одной из его функций должно быть удаление определенного комментария при нажатии на значок рядом с ним. Я знаю, что мне нужно дать им класс, который будет идентифицировать и устанавливать связь с иконками-комментариями, но, похоже, не может это сделать. Может кто-нибудь помочь?

Пример массива сообщений:

let _posts = [
    {
        text: "First post!",
        id: "p1",
        comments: [
            { id: "c1", text: "First comment on first post!" },
            { id: "c2", text: "Second comment on first post!!" },
            { id: "c3", text: "Third comment on first post!!!" }
        ]
    },
    {
        text: "Aw man, I wanted to be first",
        id: "p2",
        comments: [
            { id: "c4", text: "Don't wory second poster, you'll be first one day." },
            { id: "c5", text: "Yeah, believe in yourself!" },
            { id: "c6", text: "Haha second place what a joke." }
        ]
    }
]

Сам модуль рендеринга:

const Renderer = function() {
  const renderPosts = function(posts) {
    $("#posts").empty()

    for (index in posts) {
      let newDiv = $(`<div class=post><div class=post-text id=${posts[index].id}>${posts[index].text}
                </div>`)
      $("body").append(newDiv)
      for (let index2 in posts[index].comments) {

        let newDiv2 = $(`<div class=comments id=${posts[index].comments[index2].id}><i id="delete-comment" class="fas fa-minus-circle"></i> ${posts[index].comments[index2].text}</div></div>`)
        $(`#${posts[index].id}`).append(newDiv2)
        let $deleteComment = $(".comments")

        $("body").on("click", "#delete-comment", function() {
          $deleteComment.remove();
        });

      }
    }

  }
  return {
    renderPosts
  }
}

Большое спасибо и извините, если в первый момент форматирование кода не прошло, я не смог найти способ переместить все символы так, как я хотел. При необходимости отредактирую с вашей помощью

Answer 1

идентификаторы должны быть уникальными, вы не должны иметь id="delete-comment" в каждом сообщении.Это должен быть класс.

Я добавил атрибут data-id к кнопке удаления, который содержит идентификатор комментария.

Когда вы используете делегирование событий, вы тольконужно сделать это один раз, а не внутри цикла, который создает элемент.

const Renderer = function() {
  const renderPosts = function(posts) {
    $("#posts").empty()
    for (index in posts) {
      let newDiv = $(`<div class=post><div class=post-text id=${posts[index].id}>${posts[index].text}
                </div>`)
      $("body").append(newDiv)
      for (let index2 in posts[index].comments) {
        let newDiv2 = $(`<div class=comments id="${posts[index].comments[index2].id}"><i class="fas fa-minus-circle delete-comment" data-id="${posts[index].comments[index2].id}"></i> ${posts[index].comments[index2].text}</div></div>`);
        $(`#${posts[index].id}`).append(newDiv2);
      }
    }
  }
  return {
    renderPosts
  }
}

$("body").on("click", ".delete-comment", function() {
  $(`#${$(this).data('id')}`).remove();
});