Rimuovere span da th

AndreaCerre · 17 Mag 2021

Ciao a tutti,

ho l'elemento di una form dello screenshot allegato e vorrei togliere o non far visualizzare questi span1- span2 - span4 - span5 per questi th sotto.

Codice:

Ho provato a dare questa regola nel css ma non funziona

[CODE=css].plupload_container > .plupload > table > span1 {
display: none; !important;
}

Grazie a chi potrà aiutarmi

Qui l'htm intero per l'elemento

HTML:

<div class="fabrikElement">
        <div class="fabrikSubElementContainer">

<span id="xtr_oggetti___oggetti_img"></span>


<div class="plupload_container" id="xtr_oggetti___oggetti_img_container" style="min-height: 200px; width: 400px; position: relative;">
    <div class="plupload" id="xtr_oggetti___oggetti_img_dropList_container">
        <table class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th class="span4">Nome file</th>
                    <th class="span2 plupload_crop">&nbsp;</th>
                    <th class="span5 plupload_file_status"></th>
                    <th class="span1 plupload_file_action">&nbsp;</th>
                </tr>
            </thead>
            <tbody class="plupload_filelist" id="xtr_oggetti___oggetti_img_dropList">
            <tr id="p1f5asv23m15bg3q2pkcng1cbp9" class="plupload_delete plupload_done"><td class="span6 plupload_file_name"><span>3.png</span></td><td class="span1 plupload_resize"><a class="editImage" href="http://192.168.0.50/images/stories/3.png" alt="Ridimensiona" id="resizebutton_p1f5asv23m15bg3q2pkcng1cbp9"><i data-isicon="true" class="icon-picture "></i></a></td><td class="span5 plupload_file_status"><div class="progress  " style="margin-left=6px; ">
    <div class="progress  " style="margin-left=6px; ">
    <div class="progress  " style="margin-left=6px; ">
    <div class="bar bar-success " role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div></td><td class="span1 plupload_file_action"><a href="#"><i data-isicon="true" class="icon-delete"></i></a></td></tr></tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                                <a id="xtr_oggetti___oggetti_img_browseButton" class="btn btn-mini" href="#" style="position: relative; z-index: 0;"><i data-isicon="true" class="icon-plus-sign icon-plus"></i>                        Aggiungi file</a>
                            <span class="plupload_upload_status"></span>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- FALLBACK; SHOULD LOADING OF PLUPLOAD FAIL -->
 
<div id="p1f5asuu63seu1as51ooi1rsd1cjk6_html5_container" style="position: absolute; background: transparent none repeat scroll 0% 0%; width: 123px; height: 34px; overflow: hidden; z-index: -1; opacity: 0; top: 119px; left: 5px;" class="plupload html5"><input id="p1f5asuu63seu1as51ooi1rsd1cjk6_html5" style="font-size: 999px; position: absolute; width: 100%; height: 100%;" type="file" accept="image/bmp,text/csv,application/msword,image/gif,image/jpeg,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/vnd.ms-excel" multiple="multiple"></div></div><input type="hidden" name="xtr_oggetti___oggetti_img[id][/images/stories/3.png]" id="id_p1f5asv23m15bg3q2pkcng1cbp9" value="0"><input type="hidden" name="xtr_oggetti___oggetti_img[cropdata][/images/stories/3.png]" id="data_p1f5asv23m15bg3q2pkcng1cbp9"><input type="hidden" name="xtr_oggetti___oggetti_img[crop][/images/stories/3.png]" id="coords_p1f5asv23m15bg3q2pkcng1cbp9">

</div>    </div>

WmbertSea · 17 Mag 2021

Ciao, ci sono principalmente due errori strutturali e un

Il primo errore sta nel nome del selettore "span1". Essendo questo un selettore classe, va anteposto il punto, quindi ".span1", esattamente come hai fatto per ".plupload_container" e ".plupload".

Considerando di correggere questo primo punto, il secondo errore sta nell'uso inesatto del combinatore ">" che hai applicato proprio prima di quello span1.

Si tratta infatti del combinatore figlio diretto, nella forma "genitore > figlio", che trova l'elemento solo quando questo è, appunto, un figlio diretto del selettore genitore.

Per i primi tre componenti del tuo selettore, è quindi corretto l'uso di tale combinatore: .plupload_container > .plupload > table
Tra tali elementi, nel tuo codice HTML, hai infatti delle relazioni padre-figlio.

Non è così per l'elemento .span1, perché questo non è un figlio diretto dell'elemento table.

In quel caso puoi invece usare il combinatore discendente " " (carattere spazio), nella forma "progenitore ascendente", che trova l'elemento quando questo è, appunto, un discendente generico (di qualsiasi grado) dell'elemento progenitore.

Puoi quindi risolvere in questo modo:

CSS:

.plupload_container > .plupload > table .span1 {

    display: none; !important;

}

AndreaCerre · 20 Mag 2021

WmbertSea ha scritto:
Ciao, ci sono principalmente due errori strutturali e un

Il primo errore sta nel nome del selettore "span1". Essendo questo un selettore classe, va anteposto il punto, quindi ".span1", esattamente come hai fatto per ".plupload_container" e ".plupload".

Considerando di correggere questo primo punto, il secondo errore sta nell'uso inesatto del combinatore ">" che hai applicato proprio prima di quello span1.

Si tratta infatti del combinatore figlio diretto, nella forma "genitore > figlio", che trova l'elemento solo quando questo è, appunto, un figlio diretto del selettore genitore.

Per i primi tre componenti del tuo selettore, è quindi corretto l'uso di tale combinatore: .plupload_container > .plupload > table
Tra tali elementi, nel tuo codice HTML, hai infatti delle relazioni padre-figlio.

Non è così per l'elemento .span1, perché questo non è un figlio diretto dell'elemento table.

In quel caso puoi invece usare il combinatore discendente " " (carattere spazio), nella forma "progenitore ascendente", che trova l'elemento quando questo è, appunto, un discendente generico (di qualsiasi grado) dell'elemento progenitore.

Puoi quindi risolvere in questo modo:

CSS:

.plupload_container > .plupload > table .span1 { display: none; !important; }

Ciao, grazie mille per la spiegazione chiarissima.

Ho provato e funziona perfettamente per span 5-4-2 ora però quando vado a impostare questa regola:

CSS:

.plupload_container > .plupload > table .span1 {

    display: none; !important;

}

non mi visualizza più l'iconcina di deletazione come da immagini allegate. Questa parte per intenderci:

CSS:

<td class="span1 plupload_file_action"><a href="#"><i data-isicon="true" class="icon-delete"></i></a></td>

WmbertSea · 20 Mag 2021

Ciao, non conosco il contesto in cui stai usando tale codice, per cui non vorrei farti delle domande che possono sembrare sciocche; infatti mi viene da chiederti se magari non puoi semplicemente modificare il codice html per rimuovere quella classe dagli elementi in cui non ti serve quel comportamento.

In caso contrario bisognerà specificare meglio il selettore ma mi serve capire quali di preciso sono gli elementi a cui vuoi applicare tale regola.

Nel codice html che hai riportato sono presenti tre elementi con classe "span1":

HTML:

<th class="span1 plupload_file_action">&nbsp;</th>

<td class="span1 plupload_resize"><a class="editImage" href="..." alt="Ridimensiona" ... >...</a></td>

<td class="span1 plupload_file_action"><a href="#"><i data-isicon="true" class="icon-delete"></i></a></td>

Per quali di questi elementi vuoi che sia applicata la regola?
Quindi, qual'è la caratteristica che può essere presa in considerazione per costruire il selettore css che li contraddistingue?

Prova a chiarire meglio.

AndreaCerre · 20 Mag 2021

WmbertSea ha scritto:
Ciao, non conosco il contesto in cui stai usando tale codice, per cui non vorrei farti delle domande che possono sembrare sciocche; infatti mi viene da chiederti se magari non puoi semplicemente modificare il codice html per rimuovere quella classe dagli elementi in cui non ti serve quel comportamento.

In caso contrario bisognerà specificare meglio il selettore ma mi serve capire quali di preciso sono gli elementi a cui vuoi applicare tale regola.

Nel codice html che hai riportato sono presenti tre elementi con classe "span1":

HTML:

<th class="span1 plupload_file_action"> </th> <td class="span1 plupload_resize"><a class="editImage" href="..." alt="Ridimensiona" ... >...</a></td> <td class="span1 plupload_file_action"><a href="#"><i data-isicon="true" class="icon-delete"></i></a></td>

Per quali di questi elementi vuoi che sia applicata la regola?
Quindi, qual'è la caratteristica che può essere presa in considerazione per costruire il selettore css che li contraddistingue?

Prova a chiarire meglio.

Ciao, purtroppo non posso modificare semplicemente l'html perchè sto usando un cms con le sue precise regole quindi devo/posso intervenire solo nella classe specifica dell'elemento.

Detto questo la regola la voglio applicare su questo elemento:

HTML:

 <th class="span1 plupload_file_action">&nbsp;</th>

WmbertSea · 20 Mag 2021

bene, allora nel selettore basta specificare che la classe span1 (o quello che è) va ricercata solo per gli elementi th.

Potrebbe essere impostato così:

CSS:

.plupload_container > .plupload > table th.span1 {

    display: none; !important;

}

Prova e fai sapere.
Buon proseguimento

Cerca

Cerca

Rimuovere span da th

AndreaCerre

Utente Attivo

Allegati

WmbertSea

Moderatore

AndreaCerre

Utente Attivo

Allegati

WmbertSea

Moderatore

AndreaCerre

Utente Attivo

WmbertSea

Moderatore

Discussioni simili