Tengo un código Javascript que funciona para agregar nuevas filas html. ¿Cómo borrar uno?

este siguiente código funciona para agregar nuevas filas en HTMl:

function addRow() 
{
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);
  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

¿Cómo puedo agregar una nueva función para eliminar una fila? Intenté buscar pero no pude encontrar la respuesta.

preguntado el 10 de marzo de 12 a las 02:03

No debe tener varios elementos con el mismo ID. -

5 Respuestas

Para eliminar un elemento DOM en Javascript, usa el removeChild API. Esto requiere que tenga el elemento DOM tanto del contenedor como del elemento que desea eliminar.

En este ejemplo, si desea eliminar la fila con id. row harías lo siguiente

var row = document.getElementById('row');
row.parentNode.removeChild(row);

Documentación: https://developer.mozilla.org/En/DOM/Node.removeChild

Nota: En este ejemplo en particular, parece que está agregando varios nodos DOM con el mismo id valor. tener duplicado id valores no está permitido y le causará muchos problemas en el futuro. Cada id el valor debe ser único.

Una forma de lograr esto sería usar un contador para agregar un sufijo único a cada fila que agregue.

var rowCounter = 0;
function addRow() 
{
  rowCounter++;
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);
  newRow.id = 'new_row_' + rowCounter;
  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

respondido 10 mar '12, 02:03

¿Así que esto funcionaría? function DelRow() { var fila = documento.getElementById('fila'); fila.padre.removeChild(fila); } - John jenkins

@JohnJenkins sí, eso eliminaría el elemento con la identificación row. Sin embargo, si no soluciona el problema donde varios elementos tienen la identificación row probablemente te dará... un comportamiento interesante - jaredpar

Disculpa la última pregunta y te dejo en paz. Esto puede clonar filas HTML perfectamente, pero el valor del campo desplegable no se clona. ¿Es posible retener el valor del campo también cuando se clona? - John jenkins

@JohnJenkins, ¿a qué campo te refieres? - jaredpar

No enumeré el HTML pero está dentro de un básico y uso una lista desplegable y puede clonar el texto de los campos de texto pero no puede clonar el valor del campo desplegable. - John jenkins

Está buscando la función removeChild().

respondido 10 mar '12, 02:03

Siempre es bueno tener una referencia. Aquí esta la Página de MDN para removeChild(). - amigo00

Creo que hay un problema con su función addRow(). Está clonando un nodo y luego manteniendo la misma ID de 'fila'.

function addRow() 
{
  var row = document.getElementById('row');
  var newRow = row.cloneNode(true);

  // set newRow.id to something other than 'row'

  row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}

Para eliminar un nodo, puede usar removeChild(), para eliminar un nodo secundario de un elemento

Por ejemplo, x.removeChild(y) eliminaría el elemento secundario y del nodo x.

respondido 10 mar '12, 02:03

Si ya tiene la fila objetivo, haría esto...

row.parentNode.deleteRow(row.rowIndex);

https://developer.mozilla.org/en/DOM/table.deleteRow

Los documentos son para table, pero tbody Los elementos tienen el mismo método.

respondido 10 mar '12, 02:03

Si devuelve las filas de la función antes de agregarlas al DOM, puede registrarlas en un objeto o matriz. Luego, puede eliminarlos fácilmente con removeChild (mencionado anteriormente) sin buscar nuevamente el documento.

respondido 10 mar '12, 02:03

Gracias chicos, me metí con eso y conseguí que funcionara por suerte, ¡gracias de nuevo! :D - John jenkins

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.