Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

97
Views
How to select an array of elements that have a certain css class

So at the moment my code only removes and adds the "invisible" class to the elements that were selected by their ID. I want to select certain elements that are in the "data" array. Is there a way to select an entire selection of elements based on if they have a certain CSS class?

    let editBtn
    let deleteBtn
//Declares element variables

    function htmlHandle(data) { //takes in the data that was fetched from my server and maps it
        postsContainer.innerHTML = data.map(item => {
            return `
                <div class="post-container">
                    <a class="a" href='/'><h3 class="author">${item.author}</h3></a>
                    <div class="date">${item.date.toLocaleString()}</div>
                    <button id="optionsBtn" class="options-btn"><i class="fas fa-ellipsis-v" style="color: gray;"></i></button>
                        <button id="editBtn" class="inside-btn invisible">Edit</button><button id="deleteBtn" class="inside-btn invisible">Delete</button>
                        <br>
                        <button class="inside-btn invisible">Delete</button>
                    <p class="body-text">${item.body}</p>
                </div>
            `
        }).join('')
    }

    fetch('/api/data')
        .then(res => res.json())
        .then(data => {
            data.sort(function(a,b){
                    return new Date(b.date) - new Date(a.date);
            })
            htmlHandle(data)
            editBtn = document.querySelector("#editBtn")
            deleteBtn = document.querySelector("#deleteBtn")
            let activeTwo = false
            document.addEventListener("click", e => {
                if (e.target.classList.contains("options-btn")) { //Selects the elements with the "options-button" through the "e" parameter
                    if (!activeTwo) {
                        editBtn.classList.remove("invisible")
                        deleteBtn.classList.remove("invisible")
                        activeTwo = true
                    } else {
                        editBtn.classList.add("invisible")
                        deleteBtn.classList.add("invisible")
                        activeTwo = false
                    }
                }
            })
        })

Right now all this code is doing is remove and adding the invisible class for only the first item in the array. This makes sense since they were selected by their ID.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!