Hello. Why "display none" is not applied-CodePudding

I want to hide the block where id ends with _event_2 or _event_1. https://i.stack.imgur.com/8pVff.png I slightly corrected the code.

let tabMyMarketHistory = document.getElementsByClassName("market_tab_well_tabs")[0];
let aDisplayNoneListing = document.createElement('a');
let spanDisplayNoneListing = document.createElement('span');
aDisplayNoneListing.id ="displayNoneListingCanceledCreated";
aDisplayNoneListing.className ="market_tab_well_tab";
spanDisplayNoneListing.className ="market_tab_well_tab_contents";
spanDisplayNoneListing.textContent ="Clear";
aDisplayNoneListing.append(spanDisplayNoneListing);
tabMyMarketHistory.append(aDisplayNoneListing);

let DisplayNoneListing =document.getElementById("displayNoneListingCanceledCreated");
DisplayNoneListing.onclick = function() { 
    DisplayNoneListing.className = "market_tab_well_tab market_tab_well_tab_active";
    let itemDetals =document.querySelectorAll(`div[id^="history_row"]`);
    if (itemDetals.length > 0) {
        for (let i= 0; i < itemDetals.length; i  ) {
            if (itemDetals[i].id.includes('event_1') || itemDetals[i].id.includes('event_2')) {
                document.getElementById(itemDetals[i].id.toString()).style.display = 'none';
                console.log(document.getElementById(itemDetals[i].id.toString()));
            }
        }
        
    }
};
        
    }

Thank you very much for your comments.

CodePudding user response：

It works for me, it is hidden, but not without when I delete the 1 from the end of the ID:

let itemDetals = document.querySelectorAll(`div[id^="history_row"]`);
if (itemDetals.length > 0) {
  for (let i = 0; i < itemDetals.length; i  ) {
    if (itemDetals[i].id.includes('_event_1') || itemDetals[i].children[6].firstElementChild.id.includes('_event_2')) {
        document.getElementById(itemDetals[i].id.toString()).style.display = 'none';
        console.log(itemDetals[i].id.toString());
    }
  }
}

<div class="market_listing_row market_recent_listing_row" id="history_row_3297188894015887588_event_1">Hi</div>

CodePudding user response：

Not really sure what you're trying to accomplish with the following line. Can you explain it?

itemDetals[i].children[6].firstElementChild.id.includes('_event_2')

I changed it to look for event_2 just like the first one like I thought and it works fine, even on children of the div (if that is what you were trying to accomplish, that's my guess). You basically target all divs in the DOM whether they are children or not.

PS: Two small nitpicks. You should rename detals to details (misspelling error) and change the includes to only look for event_1 or event_2, since the extra _ is kind of unnecessary.

Here's the code:

<html>
    <body>
        <div class="market_listing_row market_recent_listing_row" id="history_row_3297188894015887588_event_3">
            Event 3 - Parent
            <div class="market_listing_row market_recent_listing_row" id="history_row_329718889ee4015887588_event_2">Event 1 - Child</div>
        </div> 
        <div class="market_listing_row market_recent_listing_row" id="history_row_3297188894015887588_event_1">
            Event 1 - Parent
            <div class="market_listing_row market_recent_listing_row" id="history_row_329714015887588_event_2">Event 2 - Child</div>
        </div> 

        <script>
            let itemDetals = document.querySelectorAll(`div[id^="history_row"]`);
            if (itemDetals.length > 0) {
                for (let i= 0; i < itemDetals.length; i  ) {
                    if (itemDetals[i].id.includes('event_1') || itemDetals[i].id.includes('event_2')) {
                        document.getElementById(itemDetals[i].id.toString()).style.display = 'none';
                    }
                }
            }
        </script>
    </body>
</html>