1

Estoy haciendo una tabla que crea un objeto, pero no se como eliminarlo

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
var i = 0;
function Añadir() {
	i = i + 1;
	var it = document.createElement("INPUT");
	var c = document.createElement("INPUT");
	var p = document.createElement('p');
	c.setAttribute("type", "checkbox");
	c.setAttribute("id", "cb");
    it.setAttribute("type", "text");
    it.setAttribute("size", "40");
    it.setAttribute("id", i);
    document.body.appendChild(it);
	document.body.appendChild(c);
	document.body.appendChild(p);
    document.getElementById(i).placeholder = "Escribe tu tarea o deber que tengas que hacer";
}
function Quitar() {

}
</script>
<style>
	#cb {
	transform: scale(2);
	cursor: pointer;
	}
</style>
<title>
Listado
</title>
</head>
<body>
<p>
<button onclick="Añadir()">Añadir una nueva tarea</button>
<button onclick="Quitar()">Quitar la última tarea</button>
</p>
</body>
</html>

1
  • ¿Cuál es el objeto?
    – A. Cedano
    Commented el 1 nov. 2017 a las 15:17

3 respuestas 3

1

Lo primero que yo haría es agregar cada tarea en un contenedor para que queden separadas unas de otras y no quede todo "tirado" en tu estructura, luego de esto simplemente selecciono el ultimo contenedor por medio de su id y lo elimino con la función removeChild()

var i = 0;
function Añadir() {
    i = i + 1;
    var div = document.createElement("div"); 
    var it = document.createElement("input");
    var c = document.createElement("input");
    var p = document.createElement('p');
    c.setAttribute("type", "checkbox");
    c.setAttribute("id", "cb");
    it.setAttribute("type", "text");
    it.setAttribute("size", "40");
    it.setAttribute("id", i);
    div.setAttribute("id", 'div_' + i);
    div.appendChild(it);
    div.appendChild(c);
    div.appendChild(p);
    document.body.appendChild(div);
    document.getElementById(i).placeholder = "Escribe tu tarea o deber que tengas que hacer";
}
function Quitar() {
    var ultimo = document.getElementById('div_' + i);
    document.body.removeChild(ultimo);

    i = i - 1;
}
#cb {
transform: scale(2);
cursor: pointer;
}
<p>
<button onclick="Añadir()">Añadir una nueva tarea</button>
<button onclick="Quitar()">Quitar la última tarea</button>
</p>

0

*Te expliqué el código en él mismo, además con esto puedes agregar y eliminar cuantas tareas quieras,además este código te muestra un mensaje en consola de que eliminaste una tarea, y si intentas eliminar una tarea y no existe, también te mostrará un mensaje. *

PD: No mezcles el código Javascript ni CSS , dentro del html es MUY MALA PRACTICA.

var charged = false; // variable "FLAG" que controlará si el dom está cargado, flag se denomina porque funciona como un "controlador" para nosotros, ya que cuando esta este en true, significa que el documento cargó
window.addEventListener("DOMContentLoaded",() =>{charged = true;}); // Comprobamos si el documento está cargado.
var i = 0;
function Añadir() {
    var div;
    if(charged) div = document.getElementById("tareas"); // meteremos en un div con id tareas
	i = i + 1;
	var it = document.createElement("INPUT");
	var c = document.createElement("INPUT");
	var p = document.createElement('p');
	c.setAttribute("type", "checkbox");
	c.setAttribute("id", "cb");
    it.setAttribute("type", "text");
    it.setAttribute("size", "40");
    it.setAttribute("id", i);
    div.appendChild(it); // las coloco en el div 
	div.appendChild(c);
	div.appendChild(p);
    document.getElementById(i).placeholder = "Escribe tu tarea o deber que tengas que hacer";
}
var tareasEliminadas = 0; // cantidad de tareas eliminadas
function Quitar() {
   var div; 
    if(charged) div = document.getElementById("tareas"); // el div
  var inputs = document.getElementsByTagName("INPUT");
    if(tareasEliminadas > inputs.length-1) {console.log("No tienes tareas creadas..");
    return;
    }
  tareasEliminadas++; // sumo
  inputs[inputs.length-tareasEliminadas].style.display = "none"; 
  tareasEliminadas++; // sumo
  inputs[inputs.length-tareasEliminadas].style.display = "none";
  console.log("Tarea eliminada..");
}
#tareas{
  width: 100%;
  height: 100%;
}
#cb {
	transform: scale(2);
	cursor: pointer;
	}
<html>
<head>
<meta charset="utf-8"/>
<title>
Listado
</title>
</head>
<body>
<p>
<button onclick="Añadir()">Añadir una nueva tarea</button>
<button onclick="Quitar()">Quitar la última tarea</button>
</p>
  <div id="tareas"></div>
</body>
</html>

-1

Ejemplo

  $(document).ready(function() {

$('#adicionar').click(function() {
  var tarea = document.getElementById("tarea").value;      
  var i = 1; //contador para asignar id al boton que borrara la tarea
  var fila = '<tr id="row' + i + '"><td>' + tarea + '</td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Quitar</button></td></tr>'; //esto seria lo que contendria la fila

  i++;

  $('#mytable tr:first').after(fila);
    $("#adicionados").text(""); //esta instruccion limpia el div adicioandos para que no se vayan acumulando
    var nFilas = $("#mytable tr").length;
    $("#adicionados").append(nFilas - 1);
    //le resto 1 para no contar la fila del header
    document.getElementById("tarea").value = "";
    document.getElementById("tarea").focus();
  });
$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
    //cuando da click obtenemos el id del boton
    $('#row' + button_id + '').remove(); //borra la fila
    //limpia el para que vuelva a contar las filas de la tabla
    $("#adicionados").text("");
    var nFilas = $("#mytable tr").length;
    $("#adicionados").append(nFilas - 1);
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form>
   <div class="form-group">
    <p>
      <label>Tarea:</label> <br>
      <input id="tarea" class="form-control" type="text" placeholder="Tarea..."><br>
    </p>
    <button id="adicionar" class="btn btn-success" type="button">Adicionar a la tabla</button>
  </div>
</form>

<p>Elementos en la Tabla:
  <div id="adicionados"></div>
</p>
<table  id="mytable" class="table table-bordered table-hover ">
  <tr>
    <th>Tarea</th>
    <th>Eliminar</th>

  </tr>
</table>

</div>

Tu Respuesta

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

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