Quiero ocultar el bloque donde id termina con _event_2 o _event_1. https://i.stack.imgur.com/8pVff.png Corregí ligeramente el código.
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())); } } } }; }Muchas gracias por tus comentarios.
A mí me funciona, está oculto, pero no sin cuando borro el 1 del final del 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>No estoy realmente seguro de lo que está tratando de lograr con la siguiente línea. ¿Puedes explicarlo?
itemDetals[i].children[6].firstElementChild.id.includes('_event_2') Lo cambié para buscar event_2 como el primero como pensé y funciona bien, incluso en los niños del div (si eso es lo que estaba tratando de lograr, supongo). Básicamente, apunta a todos los divs en el DOM, ya sean niños o no.
PD: Dos pequeños detalles. Debe cambiar el nombre de detalles a detalles (error de ortografía) y cambiar las inclusiones para buscar solo event_1 o event_2 , ya que el _ adicional es algo innecesario.
Aquí está el código:
<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>