Как получить html элемент в следующей разметке?

Question

Как в js я могу получить div с классом post в следующей html разметке, если мне известно post-id? Я знаю, что тут надо как-то через parent-child идти, но не знаю как...

`<div class="post">
    <div class="post_header">
        <input class="post_delete" type="image" src="img/delete.png" post-id="${posts[i]._id}"/>
        <input class="post_edit" type="image" src="img/edit.png" post-id="${posts[i]._id}"/>
        <tt class="post_date">${new Date(posts[i].date).toLocaleDateString()}</tt>
        <tt class="post_rubric">${posts[i].rubric}</tt>
    </div>
    <h3 class="post_title">${posts[i].title}</h3>
    <p class="post_text">${posts[i].description}</p>
</div>`

Answer 1

Можно так

let element = document.querySelector("div.post>div.post_header>input[post-id='2']").parentElement.parentElement;

console.log(element);

<div class="post">
    <div class="post_header">
        <input class="post_delete" type="image" src="img/delete.png" post-id="1"/>
        <input class="post_edit" type="image" src="img/edit.png" post-id="1"/>
        <tt class="post_date">new Date()</tt>
        <tt class="post_rubric">${posts[0].rubric}</tt>
    </div>
    <h3 class="post_title">${posts[0].title}</h3>
    <p class="post_text">${posts[0].description}</p>
</div>

<div class="post">
    <div class="post_header">
        <input class="post_delete" type="image" src="img/delete.png" post-id="2"/>
        <input class="post_edit" type="image" src="img/edit.png" post-id="2"/>
        <tt class="post_date">new Date()</tt>
        <tt class="post_rubric">${posts[1].rubric}</tt>
    </div>
    <h3 class="post_title">${posts[1].title}</h3>
    <p class="post_text">${posts[1].description}</p>
</div>

Answer 2

document.querySelector('[post-id='+id+']').closest('.post')

closest()

БЛОГ НА HUSL

Как получить html элемент в следующей разметке?

Ответы (2 шт):