Javascript Nascondere Div con id numerico dinamico

  • Creatore Discussione Creatore Discussione Asda12
  • Data di inizio Data di inizio

Asda12

Nuovo Utente
11 Apr 2018
13
1
1
44
Ciao a tutti,
sto impazzendo per creare uno script in javascript che sia in grado di nascondere un DIV che ha ID numerico dinamico.
In pratica ad ogni refresh della pagina l'id di questo div può variare da 00000000000000000 a 99999999999999999.
Esiste un modo per creare uno script che nasconda tutti i div con id compreso tra 00000000000000000 a 99999999999999999 ?
Spero possiate aiutarmi
saluti
 
Ultima modifica:
00000000000000000 a 99999999999999999

Semmai compreso tra 0 e 9999999999999, parsando il dato 0000000 diventerebbe 0, quindi perchè invece di inserire questa logica non aggiungi una classe di esclusione, tipo:
HTML:
<div id="00000002" class="remove_this" data-id="2">

</div>
 
Semmai compreso tra 0 e 9999999999999, parsando il dato 0000000 diventerebbe 0, quindi perchè invece di inserire questa logica non aggiungi una classe di esclusione, tipo:
HTML:
<div id="00000002" class="remove_this" data-id="2">

</div>
Non posso intervenire sul codice. Posso solo inserire CSS sulla base delle classi già esistenti e JAVASCRIPT.
 
Ciao, col css potrebbe anche funzionare arrivandoci per vie traverse; ad esempio selezionando quell'elemento in base ad altri suoi attributi, se ne possiede, o ad altri elementi genitori e/o elementi che vengono prima di lui nell'ordine gerarchico. Puoi postare la parte di codice html relativa a quel div? possibilmente anche eventuali suoi genitori e ciò che gli sta vicino. Sarebbe anche più semplice vedere direttamente la pagina, se possibile, magari posta il link.
 
I tuoi div / span / p etc... avranno sicuramente una classe standard puoi benissimo creare un'array di oggetti verificare la condizione nel caso sia vera lo elimini/nascondi.
 
Premetto che ho ricevuto alcune informazioni da Asda12, me le ha fornite in privato perché contengono riferimenti personali che ha voluto evitare di rendere pubblici.

Rispondo qui sulla parte esclusivamente tecnica (ma anche alla luce dei riferimenti ricevuti in privato) per fornire alcune possibili soluzioni sul problema in questione

Sarebbe possibile, come dicevo qualche post fa, impostare qualche selettore css (in vari modi) per andare a pescare quell'elemento.

Certamente anche con JavaScript/jQuery sarebbe possibile rimuovere/nascondere quell'elemento in qualche modo, ma c'è da tener presente che lo script, in questo caso, può essere lanciato solo una volta caricata completamente la pagina, cioè quando l'elemento è presente sul DOM, ed è disponibile alla manipolazione da script. Questo potrebbe comportare il fatto che, prima che sia eseguito effettivamente lo script, l'elemento risulti visibile per un istante all'apertura della pagina stessa.

Il css, invece, normalmente dovrebbe essere letto dentro l'head anche prima che il resto del body venga creato e quindi automaticamente applicato appena gli elementi vengono creati nel DOM, a meno che non ci siano altre particolari condizioni in cui anche quel css sia applicato successivamente al caricamento della pagina.

In generale quindi io andrei di css, con uno dei seguenti metodi, a seconda della fattibilità.

Metodo 1:
Supponendo che l'elemento <div> in questione sia, in tutta la pagina, l'unico in cui l'attributo "id" inizi con una cifra numerica (cosa che di fatto è generalmente inconsueta), è possibile usare il selettore di attributo con l'operatore "inizia con". Impostando un selettore con tutte le dieci possibili cifre, si coprono tutti i casi in cui l'id inizi con un valore numerico, appunto:
Codice:
div[id^="0"],div[id^="1"],div[id^="2"],div[id^="3"],div[id^="4"],div[id^="5"],div[id^="6"],div[id^="7"],div[id^="8"],div[id^="9"]
{display:none}
Nota: ovviamente display:none rimuove l'elemento dal flusso dei contenuti, non dal DOM in cui continuerà ad esistere, ma questo è comunque sufficiente per "nasconderlo" dal layout della pagina.

Metodo 1 bis:
Se sulla pagina ci sono più <div> con "id" numerico e se ne vuole nascondere solo uno specifico, potrebbe essere necessario affinare la selezione. In tal caso è possibile applicare ulteriori selettori con lo stesso sistema usato nel metodo precedente. Supponendo ad esempio che, quel <div>, oltre "id" abbia anche un attributo "style" che inizi magari con "z-index:", e che sostanzialmente questo lo differenzi da altri <div> con "id" numerici (se ce ne fossero), si potrebbe impostare in questo modo:
Codice:
div[id^="0"][style^="z-index:"],
div[id^="1"][style^="z-index:"],
div[id^="2"][style^="z-index:"],
div[id^="3"][style^="z-index:"],
div[id^="4"][style^="z-index:"],
div[id^="5"][style^="z-index:"],
div[id^="6"][style^="z-index:"],
div[id^="7"][style^="z-index:"],
div[id^="8"][style^="z-index:"],
div[id^="9"][style^="z-index:"]
{display:none}

Metodo 2:
Se l'elemento è preceduto (in modo attiguo) da un altro elemento che ha però un "id" fisso e quindi sempre identificabile in modo specifico, è possibile utilizzare il combinatore + (fratello adiacente), con una cosa del genere:
Codice:
#idElementoStabile+div
{display:none}
Chiaramente l'elemento a sinistra del + identifica l'elemento che deve trovarsi subito prima del <div>. In questo caso potrebbe essere un qualsiasi elemento con uno specifico "id" o con qualche altra proprietà che possa rendere comunque "univoco" l'intero selettore.

Metodo 2 bis:
Magari l'elemento con "id" stabile, potrebbe trovarsi prima di un'ulteriore elemento. Supponendo ad esempio una situazione html del genere:
Codice:
<div id="idElementoStabile">...</div>
<a class="classeAltroElementoStabile">...</a>
<div id="0123456789">div con id dinamico da nascondere</div>

A questo punto il css potrebbe essere impostato in questo modo:
Codice:
#idElementoStabile+a.classeAltroElementoStabile+div
{display:none}

Questo è a livello generale. Ovviamente potrebbero esserci combinazioni di altri vari elementi, in tal caso bisogna studiare la cosa nel contesto specifico.

Metodo 3:
Supponendo che tale elemento sia presente solo come ultimo elemento di tipo <div> in fondo al body, è possibile utilizzare il selettore :last-of-type, con una cosa del genere:
Codice:
body>div:last-of-type
{display:none}

Vedi se riesci a risolvere con qualcuno di questi metodi. Chiaramente possono esserci tanti altri modi per impostare al meglio il selettore ma, come già indicato, bisognerebbe valutare esattamente il contesto per capire come impostare la cosa.
 
Ultima modifica:
Premetto che ho ricevuto alcune informazioni da Asda12, me le ha fornite in privato perché contengono riferimenti personali che ha voluto evitare di rendere pubblici.

Rispondo qui sulla parte esclusivamente tecnica (ma anche alla luce dei riferimenti ricevuti in privato) per fornire alcune possibili soluzioni sul problema in questione

Sarebbe possibile, come dicevo qualche post fa, impostare qualche selettore css (in vari modi) per andare a pescare quell'elemento.

Certamente anche con JavaScript/jQuery sarebbe possibile rimuovere/nascondere quell'elemento in qualche modo, ma c'è da tener presente che lo script, in questo caso, può essere lanciato solo una volta caricata completamente la pagina, cioè quando l'elemento è presente sul DOM, ed è disponibile alla manipolazione da script. Questo potrebbe comportare il fatto che, prima che sia eseguito effettivamente lo script, l'elemento risulti visibile per un istante all'apertura della pagina stessa.

Il css, invece, normalmente dovrebbe essere letto dentro l'head anche prima che il resto del body venga creato e quindi automaticamente applicato appena gli elementi vengono creati nel DOM, a meno che non ci siano altre particolari condizioni in cui anche quel css sia applicato successivamente al caricamento della pagina.

In generale quindi io andrei di css, con uno dei seguenti metodi, a seconda della fattibilità.

Metodo 1:
Supponendo che l'elemento <div> in questione sia, in tutta la pagina, l'unico in cui l'attributo "id" inizi con una cifra numerica (cosa che di fatto è generalmente inconsueta), è possibile usare il selettore di attributo con l'operatore "inizia con". Impostando un selettore con tutte le dieci possibili cifre, si coprono tutti i casi in cui l'id inizi con un valore numerico, appunto:
Codice:
div[id^="0"],div[id^="1"],div[id^="2"],div[id^="3"],div[id^="4"],div[id^="5"],div[id^="6"],div[id^="7"],div[id^="8"],div[id^="9"]
{display:none}
Nota: ovviamente display:none rimuove l'elemento dal flusso dei contenuti, non dal DOM in cui continuerà ad esistere, ma questo è comunque sufficiente per "nasconderlo" dal layout della pagina.

Metodo 1 bis:
Se sulla pagina ci sono più <div> con "id" numerico e se ne vuole nascondere solo uno specifico, potrebbe essere necessario affinare la selezione. In tal caso è possibile applicare ulteriori selettori con lo stesso sistema usato nel metodo precedente. Supponendo ad esempio che, quel <div>, oltre "id" abbia anche un attributo "style" che inizi magari con "z-index:", e che sostanzialmente questo lo differenzi da altri <div> con "id" numerici (se ce ne fossero), si potrebbe impostare in questo modo:
Codice:
div[id^="0"][style="z-index:"],
div[id^="1"][style="z-index:"],
div[id^="2"][style="z-index:"],
div[id^="3"][style="z-index:"],
div[id^="4"][style="z-index:"],
div[id^="5"][style="z-index:"],
div[id^="6"][style="z-index:"],
div[id^="7"][style="z-index:"],
div[id^="8"][style="z-index:"],
div[id^="9"][style="z-index:"]
{display:none}

Metodo 2:
Se l'elemento è preceduto (in modo attiguo) da un altro elemento che ha però un "id" fisso e quindi sempre identificabile in modo specifico, è possibile utilizzare il combinatore + (fratello adiacente), con una cosa del genere:
Codice:
#idElementoStabile+div
{display:none}
Chiaramente l'elemento a sinistra del + identifica l'elemento che deve trovarsi subito prima del <div>. In questo caso potrebbe essere un qualsiasi elemento con uno specifico "id" o con qualche altra proprietà che possa rendere comunque "univoco" l'intero selettore.

Metodo 2 bis:
Magari l'elemento con "id" stabile, potrebbe trovarsi prima di un'ulteriore elemento. Supponendo ad esempio una situazione html del genere:
Codice:
<div id="idElementoStabile">...</div>
<a class="classeAltroElementoStabile">...</a>
<div id="0123456789">div con id dinamico da nascondere</div>

A questo punto il css potrebbe essere impostato in questo modo:
Codice:
#idElementoStabile+a.classeAltroElementoStabile+div
{display:none}

Questo è a livello generale. Ovviamente potrebbero esserci combinazioni di altri vari elementi, in tal caso bisogna studiare la cosa nel contesto specifico.

Metodo 3:
Supponendo che tale elemento sia presente solo come ultimo elemento di tipo <div> in fondo al body, è possibile utilizzare il selettore :last-of-type, con una cosa del genere:
Codice:
div:last-of-type
{display:none}

Vedi se riesci a risolvere con qualcuno di questi metodi. Chiaramente possono esserci tanti altri modi per impostare al meglio il selettore ma, come già indicato, bisognerebbe valutare esattamente il contesto per capire come impostare la cosa.

Ciao WmbertSea,
ho provato il metodo 1 e il metodo 3 (il metodo 2 non sono riusicito a capirlo).
Nel metodo 1/1bis il codice non sortisce alcun effetto.
Nel metodo 3 a quanto pare nel mio caso seppur risulti come ultimo div in realtà non lo è perche mi scompare letteralmente la parte bassa del sito ma l'oggetto che vorrei nascondere invece rimane ben visibile.

Per quanto riguarda il metodo 2, quello che non mi è chiaro è:
<div id="idElementoStabile">...</div>
<a class="classeAltroElementoStabile">...</a>
<div id="0123456789">div con id dinamico da nascondere</div>

scrivendo 0123456789 il codice capisce che deve accettare tutte le combinazioni?

saluti
 
Nel metodo 1/1bis il codice non sortisce alcun effetto
Sì, scusami ho aggiornato ora il post. Anziché [style="z-index:"] deve essere [style^="z-index:"]. L'operatore ^= significa che l'attributo in questione deve iniziare con quello specifico valore (così come è impostato per l'id). In questo esempio l'elemento in questione (div) deve contenere un attributo style che inizi con il valore "z-index:"

Se comunque il metodo 1 ti funziona, puoi utilizzare quello senza ulteriori specifiche. Dovrai però verificare sulla tua pagina se quello sia l'unico <div> che inizi con un valore numerico.

Per quanto riguarda il metodo 2, quello che non mi è chiaro è:
[...]
scrivendo 0123456789 il codice capisce che deve accettare tutte le combinazioni?
Quello è l'esempio del codice html, ovviamente tu non vai a mettere quel valore nell'html dal momento che è dinamico. Ho messo 0123456789 per sottintendere che quello sia il tuo <div> in questione, quello che va nascosto. Quello che interessa a te è il css. Quel selettore prescinde dal valore che può avere l'id del tuo <div>, ma semplicemente seleziona un div che è preceduto da specifici elementi.

In quel caso infatti il <div> non viene selezionato in base al suo "id", ma in base alla relazione con gli elementi che lo precedono. Per questo ho indicato che è possibile applicare una cosa del genere se si ha la certezza che l'elemento, o gli elementi, usati come "fratelli adiacenti" per il selettore, siano identificabili in modo univoco.

E' ovvio che se un elemento ha un id (che resta stabile) tu puoi facilmente selezionarlo da css. Nel tuo caso, questo elemento potrebbe appunto risultare subito prima del tuo <div> da selezionare, allora puoi usare il metodo 2. A seconda dei casi però potresti trovarti magari ad indicare una serie di elementi adiacenti per ottenere un selettore che identifichi in modo mirato il tuo <div> (anche senza sapere il suo "id"). Infatti nel metodo 2/bis ho usato come esempio un elemento con un "id" fisso seguito da uno con una classe e poi dal <div> che deve essere nascosto, ma questo è solo un esempio, nel tuo caso potresti dover specificare una serie di 1 o 2 o anche più elementi fratelli (usando i loro id o classi o altri tipi di selettori) per ottenere lo scopo.

I metodi che ho indicato sono comunque degli esempi, poi devi valutare tu come meglio costruire il tuo selettore in base a come si presentano gli elementi nel codice html della tua pagina.
 
Sì, scusami ho aggiornato ora il post. Anziché [style="z-index:"] deve essere [style^="z-index:"]. L'operatore ^= significa che l'attributo in questione deve iniziare con quello specifico valore (così come è impostato per l'id). In questo esempio l'elemento in questione (div) deve contenere un attributo style che inizi con il valore "z-index:"

Se comunque il metodo 1 ti funziona, puoi utilizzare quello senza ulteriori specifiche. Dovrai però verificare sulla tua pagina se quello sia l'unico <div> che inizi con un valore numerico.


Quello è l'esempio del codice html, ovviamente tu non vai a mettere quel valore nell'html dal momento che è dinamico. Ho messo 0123456789 per sottintendere che quello sia il tuo <div> in questione, quello che va nascosto. Quello che interessa a te è il css. Quel selettore prescinde dal valore che può avere l'id del tuo <div>, ma semplicemente seleziona un div che è preceduto da specifici elementi.

In quel caso infatti il <div> non viene selezionato in base al suo "id", ma in base alla relazione con gli elementi che lo precedono. Per questo ho indicato che è possibile applicare una cosa del genere se si ha la certezza che l'elemento, o gli elementi, usati come "fratelli adiacenti" per il selettore, siano identificabili in modo univoco.

E' ovvio che se un elemento ha un id (che resta stabile) tu puoi facilmente selezionarlo da css. Nel tuo caso, questo elemento potrebbe appunto risultare subito prima del tuo <div> da selezionare, allora puoi usare il metodo 2. A seconda dei casi però potresti trovarti magari ad indicare una serie di elementi adiacenti per ottenere un selettore che identifichi in modo mirato il tuo <div> (anche senza sapere il suo "id"). Infatti nel metodo 2/bis ho usato come esempio un elemento con un "id" fisso seguito da uno con una classe e poi dal <div> che deve essere nascosto, ma questo è solo un esempio, nel tuo caso potresti dover specificare una serie di 1 o 2 o anche più elementi fratelli (usando i loro id o classi o altri tipi di selettori) per ottenere lo scopo.

I metodi che ho indicato sono comunque degli esempi, poi devi valutare tu come meglio costruire il tuo selettore in base a come si presentano gli elementi nel codice html della tua pagina.

credo che il problema non sia affatto il tuo codice, in pratica il css che inserisco io nel software agisce perfettamente su tutto il sito tranne che sul div finale che voglio eliminare.
Infatti usando
div[id^="f"]
{display:none}
mi elimina il div footer (perchè inizia con la f) mentre usando i numeri come da te indicato, non elimina nulla.
Questo spiegherebbe il fatto che con last-of-type invece di eliminare l'ultimo div elimin a il penultimo.
A mio modestissimo parere (spero di non scrivere una stupidaggine colossale) il campo CSS personalizzato che ho sul mio software interviene su tutto tranne che su quel div.
 
E' possibile che ci siano delle altre regole che in qualche maniera vanno a sovrascrivere queste o che queste non abbiano sufficiente specificità o qualche altra cosa che non è chiara. Ma ti ripeto, senza vedere la tua pagina non è semplice capire come intervenire.

Fai quest'ulteriore prova, inserisci la clausola !important in questo modo:
Codice:
{display:none !important;}
ovviamente con tutto il resto del selettore.

Questo gli da maggiore priorità. Vedi se così va.

Questo spiegherebbe il fatto che con last-of-type invece di eliminare l'ultimo div elimin a il penultimo.
No, in questo caso è possibile che il tuo <div> non sia l'ultimo "figlio diretto". Magari sta dentro qualcos'altro o dopo di lui c'è qualche altro <div>.

Nota: ho appena corretto nuovamente il codice sul post, ho aggiunto body> per limitare la selezione sui figli diretti del body, altrimenti quel css verrebbe applicato indistintamente a tutti gli ultimi figli <div> di qualsiasi elemento, ovviamente è meglio che non sia così.

In qualunque caso però se non ti funzionava prima non dovrebbe funzionare nemmeno ora. Possibile invece che quel metodo non vada bene per la situazione del tuo html, o magari potrebbe andare bene un qualcosa di simile ma andrebbe verificato comunque il reale contesto della tua pagina per poter capire.

A mio modestissimo parere (spero di non scrivere una stupidaggine colossale) il campo CSS personalizzato che ho sul mio software interviene su tutto tranne che su quel div.
In generale il css incluso nella pagina agisce potenzialmente su tutto il documento, e quindi su tutti i suoi contenuti. Che io sappia, l'unico caso in cui non può agire è sul contenuto di elementi <iframe> e, perché no, potrebbe magari essere il tuo caso anche se da ciò che ho visto relativamente ai link di riferimento che mi hai mandato in privato, non ho notato iframe o robe del genere..

Penso invece sia più probabile che altre regole applicate a quel <div> abbiano maggiore priorità e sovrascrivano queste che stai cercando di applicare, oppure che questo css non sia adatto per la struttura html della tua pagina.

Più di questo non posso fare a meno che tu non possa mostrarmi (magari anche solo in privato) la tua reale pagina.

Intanto fai comunque la prova con !important e vedi se si risolve qualcosa.
 
Ultima modifica:
Mi scuso con tutti ma è stato un mio errore.
Inserendo il codice:
div[id^="0"],div[id^="1"],div[id^="2"],div[id^="3"],div[id^="4"],div[id^="5"],div[id^="6"],div[id^="7"],div[id^="8"],div[id^="9"]{
display: none !important;
}

a metà CSS, non funzionava, mentre inserendolo in cima al CSS ha funzionato perfettamente.
Non so spiegare il perchè ma alla fine un pò di mistero non guasta nella vita! :-D
Non so come ringraziare WmbertSea perchè è stato davvero gentilissimo, per me è la prima esperienza in un forum di questo genere e non so se la mia è stata semplice fortuna di imbattermi in lui o se ancore esiste gente così cortese e generosa come lui.
Grazie ancora.
 
Bene, mi fa piacere che si sia risolto.
Ho visto comunque la tua pagina e ho potuto verificare che sul tuo <div> effettivamente c'è uno style in linea in cui è applicato "display: block;". Lo stile in linea ha maggiore specificità rispetto al css incluso (dentro head) nel documento (cioè quello che stai cercando di applicare), per questo motivo tale regola "display: block;" avrebbe priorità andando a sovrascrivere quel "display: none;". In questo caso la clausola !important fa il suo dovere (sempre che non sia presente anche sullo stile in linea).

In base a questo, non dovrebbe esserci differenza nella posizione in cui viene posta la regola sul css incluso, per cui dovrebbe funzionare allo stesso modo che tu la metta in cima al css o a metà o alla fine, anzi, in generale a parità di regola, una regola posta dopo ha maggiore priorità rispetto ad una che gli viene prima). Se non ti ha funzionato mettendola a metà, magari c'era qualche altro problema, magari si è rotto qualcosa nel css mentre la inserivi a metà. Ad ogni modo l'importante è che si sia risolto.

Non so come ringraziare WmbertSea ...
Figurati, lo hai appena fatto, apprezzo il tuo ringraziamento.
Buone cose.
 

Discussioni simili