Помощь в создании родительской / дочерней структуры в Jquery

Question

У меня есть следующее HTML:

Я пытаюсь отправить <p>{{ $comment->comment }}</p> в Jquery функцию, после нажатия на кнопку Изменить. Мне нужна помощь в заполнении следующей структуры:

Comment = event.target.parentNode.childNodes[1];

<div class=" p-3 border-top border-bottom bg-light">
  <div class="d-flex align-items-center osahan-post-header">
    <div class="dropdown-list-image mr-3 mb-auto"><img class="rounded-circle" src="img/p8.png" alt=""></div>
    <div class="mr-1">
      <div class="text-truncate h6 mb-3">{{ $comment->user->first_name }} {{ $comment->user->last_name }}</div>
      <p>{{ $comment->comment }}</p>
    </div>
    <span class="ml-auto mb-auto">
      <div class="text-right text-muted pt-1 small">{{ $comment->created_at}}</div>
    </span>
  </div>
  <div class="post" align="right" data-postid="{{ $comment->id }}">
    <a href="#" data-toggle="modal" id="eid">Edit</a>
  </div>
</div>
</div>

Answer 1

Если вы исправите свой недействительный HTML (как уже упоминалось в комментарии, <div> не может быть внутри <span>), вы можете получить комментарий следующим образом:

document.getElementById("eid").onclick = function(e) {
  let comment = e.target.closest(".p-3").getElementsByTagName("p")[0].innerHTML;
  console.log(comment);
};

или, если вы используете jQuery:

 $("#eid").on("click", function(){
    let comment = $(this).closest(".p-3").find("p").text();
    console.log(comment);
 });