navigate to <code>button</code> from <code>.li</code>

Question

I am not able to reach to button tag from .li. How do I do it in JS?

    <div class="li">
        <li> Apple <button>Delete</button></li>
        <li> Ball <button>Delete</button></li>
        <li> Cat <button>Delete</button></li>
        <li> Dog <button>Delete</button></li>
    </div>

Is button a sibling or a child element of li tag? I get undefined in the console either way.

Answer 1

You might want to query the parent div first, then get all buttons

let buttons = document.body.querySelector(".li").getElementsByTagName("button");

// test if we've queried the buttons successfully 
buttons[0].style.display = "none";