0

En mi archivo js tengo este código para guardar los selectores:

    const lista_reuniones = document.querySelector('#boton-eliminar');

eventListeners();

function eventListeners(){    
    listaEmpleados.addEventListener('click', invitarEmpleado);
    lista_reuniones.addEventListener('click', eliminar_reunion);
}


function eliminar_reunion(e){

  if (e.target.parentElement.classList.contains('meeting-plan')){

      const id_reunion = e.target.parentElement.getAttribute('data-id-reunion');

      console.log(id_reunion);
}

En mi archivo php imprimo un div:

echo   "<div class='plans' id='meetings-plans'>";
    foreach ($listaReuniones as $reunion) {

        if ($date_meeting > $date_now) { ?>

        //Aquí cojo el id de la reunión con el atributo data-id
        <div class='meeting-plan'  data-id-reunion='<?php echo $reunion->getId() ?>'>
            <ul class="datos-empleado">

                <li>Organizado por: <?php echo $reunion->getIdEmpleadoOrganizador() ?></li>
                <li> Asunto: <?php echo $reunion->getAsunto() ?></li>
                <li>Sala: <?php echo $reunion->getSala() ?></li>
                <li>Fecha: <?php echo $reunion->getFecha() ?></li>
                <li>Comienza: <?php echo $reunion->getInicio() ?></li>
                <li>Termina: <?php echo $reunion->getFin() ?></li>
                <li>Obervaciones: <?php echo $reunion->getObservaciones() ?></li>
                <li>Coste Estimado: <?php echo $reunion->getCosteEstimado() ?></li>
                <li><a href="../views/empleados_asistentes.php?id=<?php echo $reunion->getId() ?>">Ver Invitados</a></li>
                <li><a href="../views/empleado_invitar_vista.php?id=<?php echo $reunion->getId() ?>">Invitar</a></li>
                <li><a href="../views/reunionEditar.php?id=<?php echo $reunion->getId() ?>">Editar</a></li>
                <li id="boton-eliminar"><a href="#">Eliminar</a></li>

            </ul>
        </div>

    <?php }
}

    echo "</div>";

Estoy intentando coger el id de la reunion a traves del atributo data-id del div, para que al hacer click en

<li><a href="#">Eliminar</a></li>

Me imprima el id con un console.log ... Pero no hace absolutamente nada...

¿Qué estoy haciendo mal?

1 respuesta 1

0

Para ayudarte con tu pregunta he intentado primero abstraer el resultado de lo que tu código PHP produce a un html básico (faltarán datos, pero creo que esto es un buen ejemplo).

<div class="plans" id="meeting-plans">
    <!-- Loop Begin -->
    <div class="meeting-plan" data-id-meeting="meeting1">
        <ul>
            <li>Meeting One</li>
            <!-- No deberías poner ids estáticos en un bucle, mejor utiliza una clase -->
            <li class="meeting-plan-delete"><a href="#">Eliminar</a></li>
        </ul>
    </div>

    <div class="meeting-plan" data-id-meeting="meeting2">
        <ul>
            <li>Meeting Two</li>
            <!-- No deberías poner ids estáticos en un bucle, mejor utiliza una clase -->
            <li class="meeting-plan-delete"><a href="#">Eliminar</a></li>
        </ul>
    </div>

    <div class="meeting-plan" data-id-meeting="meeting3">
        <ul>
            <li>Meeting Three</li>
            <!-- No deberías poner ids estáticos en un bucle, mejor utiliza una clase -->
            <li class="meeting-plan-delete"><a href="#">Eliminar</a></li>
        </ul>
    </div>
    <!-- Loop End-->
</div>

Ahora, con este ejemplo podemos intentar solucionar tu problema.

En primer lugar, los eventListener no queremos añadirlos al propio meeting, sino a cada uno de los botones que se van a generar dentro de los meeting. Tú los llamas por id aunque deberías hacerlo por clase, el ejemplo lo haré por clase.


// Recuperamos todos los botones eliminar que hemos introducido en el dom
const meetingList = document.querySelectorAll('.meeting-plan-delete');

// Iteramos sobre meetingList y añadimos un EventListener para click.

meetingList.forEach(element => {
    element.addEventListener('click', myCallback);
})

Con esto tenemos ya un eventListener en cada uno de los elementos que queremos. Ahora definamos el callback de nuestro eventListener:

function myCallback(event) {
  // Recuperamos todos los 'padres' del elemento.
  const elementPath = e.path;

  // Encontramos de entre todos los padres cuál tiene la clase 'meeting-plan'
  const parentMeeting = elementPath.find(el => el.classList.contains('meeting-plan'));

  /* Aquí va lo que sea que quieras hacer con tu elemento */

}

Por último, querías acceder a data-id-meeting. A este tipo de propiedades no se accede vía getAttribute, sino a través del objeto dataset. Dataset recoge los valores de todos los data-* almacenándolos en un objeto cuya clave es el nombre que se le da en camelcase, por ejemplo para acceder a data-my-awesome-attribute sería element.dataset.myAwesomeAttribute.

Con toda esta información te dejo un snippet que puede hacer lo que propones.

const deleteMeetingButtonList = document.querySelectorAll('.meeting-plan-delete');

function deleteMeeting(e) {
  const elementPath = e.path;
  
  const parentMeeting = elementPath.find(el => el.classList.contains('meeting-plan'));
  
  console.log(parentMeeting.dataset.idMeeting);
};


deleteMeetingButtonList.forEach(el => {
  el.addEventListener('click', deleteMeeting);
})
<div class="plans" id="meeting-plans">
    <!-- Loop Begin -->
    <div class="meeting-plan" data-id-meeting="meeting1">
        <ul>
            <li>Meeting One</li>
            <!-- No deberías poner ids estáticos en un bucle, mejor utiliza una clase -->
            <li class="meeting-plan-delete"><a href="#">Eliminar</a></li>
        </ul>
    </div>

    <div class="meeting-plan" data-id-meeting="meeting2">
        <ul>
            <li>Meeting Two</li>
            <!-- No deberías poner ids estáticos en un bucle, mejor utiliza una clase -->
            <li class="meeting-plan-delete"><a href="#">Eliminar</a></li>
        </ul>
    </div>

    <div class="meeting-plan" data-id-meeting="meeting3">
        <ul>
            <li>Meeting Three</li>
            <!-- No deberías poner ids estáticos en un bucle, mejor utiliza una clase -->
            <li class="meeting-plan-delete"><a href="#">Eliminar</a></li>
        </ul>
    </div>
    <!-- Loop End-->
</div>

3
  • Ya está!!! Muchísimas gracias por el currazo que te has pegado!! el 30 may. 2019 a las 19:26
  • Solo una duda... ¿Por qué no usar ids? Yo he hecho lo mismo que tú con ids y me funciona perfectamente. Lo hago así porque es una manera de tener claro que cuando manejo clases, estoy tocando css y cuando manejo ids, estoy con javascript... el 30 may. 2019 a las 19:27
  • 1
    El asunto de no usar IDs tiene que ver con HTML, los id, por definición han de ser únicos, si iteras con IDs estaticos tendrás varias veces el mismo ID el 31 may. 2019 a las 21:53

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.