1

tengo este recuadro:

<div id="context_menu" class="" style="top: 206px; left: 542px; display: block;">
    <div class="menu_item" onclick="do_action('eliminar')">Eliminar Fichero seleccionado/s</div> 
    <div class="menu_item" onclick="do_action('download_as_zip')">Descargar seleccionado</div>
    <div class="menu_item" onclick="enviar()">Enviar</div>
    <div class="menu_item" onclick="do_action('export')">Exportar a Excel</div>
</div>

Y quiero que no se vea el div que contiene el "enviar", lo que viene a ser esto en css:

div#context_menu>div:nth-child(3){display:none;}

he probado hacerlo así (sin éxito):

var y = document.getElementsByTagName("div#context_menu>div:nth-child(3)");
/*var y = document.getElementsByTagName("div#context_menu>div:nth-child(3)")[0];*/
  y.setAttribute("style", "display:none");

¿Cómo debería de hacerlo (solo usando JS)?

2
  • 2
    Cuando usas .getElementsByTagName() solo debes especificar la etiqueta y tú estás pasando un selector CSS completo, entonces, deberías usar .querySelector().
    – Triby
    el 15 jun. 2021 a las 16:11
  • si cierto, eso también lo probé y sigue dando un "Cannot read property 'setAttribute' of undefined". Y aunque no me diese ese error no tengo ni idea de donde poner el ":nth-child(3)"
    – Nico
    el 16 jun. 2021 a las 7:23

3 respuestas 3

2

Por que quieres específicamente encontrar los elementos con este tipo de query? Cuando es algo que necesitas repetir, como aplicar un evento en todos los elementos puedes utilizar algún query de este tipo, pero si quieres aplicar algo en una etiqueta especifica y que conoces, pues solo agrégale un id.

Igualmente aunque recalco lo de arriba, lo que está pasando es muy simple, primero getElementsByTagName no admite este tipo de queries y segundo aunque hubiese una o mas etiquetas getElementsByTagName devuelve un array con elementos encontrados (ojo), solo para que te des una idea var y = document.getElementsByTagName("div#context_menu>div:nth-child(3)"); siempre va a ser undefined y el error es bastante explicito, undefined no es un objeto y por lo tanto no tiene ninguna propiedad que se llame setAttribute.

En su lugar solo deberías utilizar querySelector que esta hecho especificamente para utilizar css queries:

var y = document.querySelector("div#context_menu>div:nth-child(3)");
/*var y = document.getElementsByTagName("div#context_menu>div:nth-child(3)")[0];*/
  y.setAttribute("style", "display:none");
<div id="context_menu" class="" style="top: 206px; left: 542px; display: block;">
    <div class="menu_item" onclick="do_action('eliminar')">Eliminar Fichero seleccionado/s</div> 
    <div class="menu_item" onclick="do_action('download_as_zip')">Descargar seleccionado</div>
    <div class="menu_item" onclick="enviar()">Enviar</div>
    <div class="menu_item" onclick="do_action('export')">Exportar a Excel</div>
</div>

Igualmente, no es mas fácil simplemente usar una id en lugar de harcodear queries? jeje

var y = document.getElementById("enviar");
 y.setAttribute("style", "display:none");
<div id="context_menu" class="" style="top: 206px; left: 542px; display: block;">
    <div class="menu_item" onclick="do_action('eliminar')">Eliminar Fichero seleccionado/s</div> 
    <div class="menu_item" onclick="do_action('download_as_zip')">Descargar seleccionado</div>
    <div id="enviar" class="menu_item" onclick="enviar()">Enviar</div>
    <div class="menu_item" onclick="do_action('export')">Exportar a Excel</div>
</div>

Un saludo, espero que te sea de ayuda.

1

Podrías usar la función querySelector() que usa selectores CSS, por lo que te resultará muy amigable al tener una traslación casi directa de lo que estabas haciendo con CSS.

document.querySelector('div#context_menu>div:nth-child(3)').style.display = "none";
<div id="context_menu" class="" style="top: 206px; left: 542px; display: block;">
    <div class="menu_item" onclick="do_action('eliminar')">Eliminar Fichero seleccionado/s</div> 
    <div class="menu_item" onclick="do_action('download_as_zip')">Descargar seleccionado</div>
    <div class="menu_item" onclick="enviar()">Enviar</div>
    <div class="menu_item" onclick="do_action('export')">Exportar a Excel</div>
</div>

Referencias: querySelector()

1
  • Muchas gracias, menudo crack, la verdad es que no conocía el querySelector() hace poco que volví a tocar js después de 5 años sin tocarlo.
    – Nico
    el 16 jun. 2021 a las 7:33
0

Si por algún motivo necesitas hacerlo según la vieja escuela (querySelector y querySelectosAll no son compatibles con todos los navegadores), sin entrar en discusiones sobre si debes mejorar o no la estructura de tus elementos e implementar mejores prácticas, como evitar el uso de funciones in-line, la forma de hacer lo que pretendes sería seleccionar el div padre por su id primero y luego el div hijo por su la clase:

var y=document.getElementById( 'context_menu' ).getElementsByClassName( 'menu_item' )[2];
/*Test*/
console.log(y);
y.setAttribute("style", "display:none;");
<div id="context_menu" class="" style="top: 206px; left: 542px; display: block;">
    <div class="menu_item" onclick="do_action('eliminar')">Eliminar Fichero seleccionado/s</div> 
    <div class="menu_item" onclick="do_action('download_as_zip')">Descargar seleccionado</div>
    <div class="menu_item" onclick="enviar()">Enviar</div>
    <div class="menu_item" onclick="do_action('export')">Exportar a Excel</div>
</div>

Ten en cuenta que getElementsByClassName() devuelve un array de elementos con esa clase, y los arrays empiezan desde el índice 0, como quieres el tercer elemento, por uso pusimos 2 como índice.

Si quieres modernizar tu código, como bien han señalado los compañeros, puedes usar querySelector, que te da más posibilidades de seleccionar los elementos: por tipo, por id, por clase, por posición.

document.querySelector('div#context_menu>div:nth-child(3)').style.display = "none";
<div id="context_menu" class="" style="top: 206px; left: 542px; display: block;">
    <div class="menu_item" onclick="do_action('eliminar')">Eliminar Fichero seleccionado/s</div> 
    <div class="menu_item" onclick="do_action('download_as_zip')">Descargar seleccionado</div>
    <div class="menu_item" onclick="enviar()">Enviar</div>
    <div class="menu_item" onclick="do_action('export')">Exportar a Excel</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.