0

Estoy creando un CRUD con fetch, el problema cuando quiero seleccionar un elemento para obtener su id y posteriormente eliminarlo, ya se como seleccionar el elemento con Jquery, pero lo quiero hacer con Javascript Puro.

Mi función en jquery funciona de esta manera:

Yo tengo una tabla, y en la tabla tengo un botón eliminar, cuando le doy click a ese botón, selecciono ese elemento, luego me voy a su padre que seria un TD y luego me voy a su padre que es el TR en ese TR tengo un atributo llamado id_persona, luego obtengo ese valor en una variable y esa variable la mando como parámetro a la función eliminarPersona(id_Persona), luego de eso con ese id puedo eliminar ese registro

Esta es la tabla:

introducir la descripción de la imagen aquí

esta es la función con Jquery que me funciona, pero yo quiero hacer eso mismo pero con JavaScript.

$(document).on('click', '#btn-eliminar', function(){       
    let elemtentoSelecionado = $(this)[0].parentElement.parentElement;  
    let id_eliminar = elemtentoSelecionado.id;
    eliminarPersona(id_eliminar);
    //console.log(id_eliminar); 
 })

El mayor problema es que no se como representar $(this)[0] en JavaScript

1
  • Los ids tienen que ser únicos en cada página, si necesitas poner un "identificador" para un conjunto de elementos puedes usar una class class="btn-eliminar".
    – x3k
    el 26 feb. 2020 a las 14:12

4 respuestas 4

2

NOTA: En está respuesta se trata el id btn-eliminar como clase puesto que en el ejemplo se ve que se usa en varios elementos.

Solo tienes 2 lineas para "traducir" a Javascript vanilla puesto que lo demás ya lo tienes como JS.

$(document).on('click', '#btn-eliminar', function(){       
    let elemtentoSelecionado = $(this)[0].parentElement.parentElement;
    ...
});

En esta linea:

let elemtentoSelecionado = $(this)[0].parentElement.parentElement;

Solo tienes jQuery en el $(this) que te devuelve un objeto jQuery, pero realmente estas cogiendo el elemento del DOM con [0] también se puede hacer con .get(0) por lo que directamente podrías usar this y así coger el DOM element sin usar jQuery.

let elemtentoSelecionado = this.parentElement.parentElement;

Docu: How do I pull a native DOM element from a jQuery object?

Para pasar el evento tienes que tener en cuenta si los elementos ya están creados en el DOM o se van a crear dinamicamente. Si son elemento creados dinamicamente tendrás que delegar el evento que es lo que hace .on(). La forma mas simple es la que comenta @Jonathan_Orta en su respuesta creando el botón con el evento como atributo en el html, pero yo te voy a dejar las alternativas en código.

Elementos creados dinamicamente:

[Opción 1]: Agregar evento al padre (la tabla) y comprobar el elemento clickado:

document.getElementById("miTabla").addEventListener("click",function(e){
    var target=getEventTarget(e);
    if(target.tagName === 'BUTTON' && target.className === 'btn-eliminar'){
        console.log("Es un boton y de la clase 'btn-eliminar'");
        /* Tu código del evento eliminar iria aqui*/
    }
});

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement;
}

JavaScript Event Delegation is Easier than You Think

[Opción 2]: Crear el elemento y despues añadirle el evento:

Esta opción puede dar problemas de rendimiento si creas elementos en grandes cantidades y les pones a todos un evento. Para evitar esto puedes crear un unico evento a la tabla y delegarlo a los botones (primera opcion)

//Se crea el elemento
var elementoDinamico = document.createElement("button");
//Se le añaden los atributos (solo conozco el id que tratare como class)
elementoDinamico.setAttribute("class","btn-eliminar");
//Se agrega al DOM
document.querySelector("#tuTabla").appendChild(elementoDinamico);
//Se le añade el evento
elementoDinamico.addEventListener("click", handler);

Elementos NO son creados dinamicamente:

En este caso es mucho mas simple, solo tienes que añadir el evento a los elementos con esa clase.

var elementos = document.getElementsByClassName("btn-eliminar");

for (var x = 0; x < elementos.length; x++) {
    elementos[x].addEventListener("click", handler);
}

Relacionados:

[jQuery] No se ejecuta el evento al ser elementos dinámicos, ¿Como delegar eventos?

[jQuery] ¿Cómo puedo delegar múltiples eventos a un elemento en el DOM?

[Ingles] What's the difference between '$(this)' and 'this'?

1

Te recomiendo no utilizar id si son varios botones, puedes agregar una funcion dentro del button, te presento dos formas

  1. Agregar this a la función
<button onclick="runDelete(this)></button>

<script>
function runDelete(e) {
    let elementoSelecionado = e.parentElement.parentElement;  
    let id_eliminar = elementoSelecionado.id;
    eliminarPersona(id_eliminar);
}
</script>
  1. Agregar directamente el id a la funcion
<button onclick="eliminarPersona(34)></button>
0

El equivalente de $(this) en Vanilla JS es event.target.


<button class="btn-eliminar" data-idPersona="12345678">Eliminar</button>

El atributo data-idPersona llevara como valor el identificador único de cada personas registrada.

const btnEliminar = document.querySelector('.btn-eliminar');
if (!btnEliminar) return; // en caso de que no exista dicho elemento, no ejecuta nada
btnEliminar.addEventListener('click', function (event) {
  let $this = event.target;
  let idPersona = $this.dataset.idPersona; // obtenemos el valor del atributo 'data-idPersona'
  eliminarPersona(idPersona);
})
6
  • 1
    aunque esto solo funciona para un boton ya que estan usando id, lo mas adecuado seria que en el html del boton usaran el evento onclick para llamar a la funcion eliminarPersona el 24 feb. 2020 a las 23:59
  • me sale este error main.js:80 Uncaught TypeError: Cannot read property 'addEventListener' of null el 25 feb. 2020 a las 0:05
  • 1
    al parecer no esta encontrando a el elemento const btnEliminar = document.getElementById('btn-eliminar'); el 25 feb. 2020 a las 0:06
  • Lo que dice Fernando es verdad, siendo un elemento #id solo aplica para dicho elemento y no puede ser repetido ya que solo afectara al primero. Lo que te recomiendo es un usar un atributo data. Y cambiar ese id #btn-eliminar por un simple class. Modificare mi respuesta para darte un ejemplo mas claro. el 25 feb. 2020 a las 0:08
  • me sale este error main.js:80 Uncaught TypeError: Cannot read property 'addEventListener' of null el 25 feb. 2020 a las 0:26
0

Bueno te comparto como puedes hacerlo, ya es cuestión que lo ajustes según como lo vas necesitando, este es un ejemplo:

function llenarTablaJS() {
  var tbody = document.querySelectorAll("#tableJS > tbody")[0];
  for (var idx = 0; idx < 5; idx++) {
    var tr = document.createElement('tr');
    tr.setAttribute('id', 'item' + idx);
    for (var idx2 = 0; idx2 < 3; idx2++) {
      var td = document.createElement('td');
      if (idx2 == 2) {
        var p = document.createElement('p');
        p.innerHTML = 'Eliminar';
        p.addEventListener('click', function(e) {
          tbody.removeChild(e.path[2]);
        });
        td.appendChild(p);
      } else {
        td.innerHTML = 'Valor ' + (idx + 1);
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
}

function eliminarItem(e) {
  var tbody = document.querySelectorAll("#table > tbody")[0];
  tbody.removeChild((e.parentElement).parentElement);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<body onload="llenarTablaJS()">
  <div class="container mt-4">
    <p>Prueba 1: Ejecutando evento desde el JAVASCRIPT</p>
    <table class="table table-hover table-striped" id="tableJS">
      <thead>
        <tr>
          <th>Campo 1</th>
          <th>Campo 2</th>
          <th>Campo 3</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <hr>
    <p>Prueba 2: Ejecutando evento desde el HTML</p>
    <table class="table table-hover table-striped" id="table">
      <thead>
        <tr>
          <th>Campo 1</th>
          <th>Campo 2</th>
          <th>Campo 3</th>
        </tr>
      </thead>
      <tbody>
        <tr id="tr-1">
          <td>Valor 1</td>
          <td>Valor 1</td>
          <td>
            <p onclick="eliminarItem(this)">Eliminar</p>
          </td>
        </tr>
        <tr id="tr-2">
          <td>Valor 2</td>
          <td>Valor 2</td>
          <td>
            <p onclick="eliminarItem(this)">Eliminar</p>
          </td>
        </tr>
        <tr id="tr-3">
          <td>Valor 3</td>
          <td>Valor 3</td>
          <td>
            <p onclick="eliminarItem(this)">Eliminar</p>
          </td>
        </tr>
        <tr id="tr-4">
          <td>Valor 4</td>
          <td>Valor 4</td>
          <td>
            <p onclick="eliminarItem(this)">Eliminar</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Espero te sirva

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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