Select specific sibling element

Question

In my app I want to get sibling elements of the task-update element, when it is clicked, and then change their classes.

HTML:

<template id="template-task">
    <li>
        <span id="task-title"></span>
        <input id="task-title-input" class="hide">
        <span id="task-text"></span>
        <input id="task-text-input" class="hide">
        <span id="task-update">Update</span>
        <span id="task-save" class="hide">Save</span>
        <span id="task-del">Delete</span>

    </li>
</template>

JS:

this.closest("#task-text").classList.add("hide");
this.closest("#task-text-input").classList.remove("hide");
this.closest("#task-title").classList.add("hide");
this.closest("#task-title-input").classList.remove("hide");
this.closest("#task-save").classList.remove("hide");

This solution sadly doesn't work for me. From what I read it's because closest looks only for parent elements. Is there another way to do it? Selecting these items with nextSibling , prevSibling doesn't look well to me.

Answer 1

If you get the parent node you then can access its children.