Delete object in javascript

Question

Delete object in javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (-1 votes)

1

I'm making a table that creates an object, but I do not know how to remove it

<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>

javascript html

asked by Qwerty 01.11.2017 в 16:14

source

3 answers

0

* I explained the code to it, plus with this you can add and delete as many tasks as you want, this code also shows you a message in the console that you deleted a task, and if you try to delete a task and it does not exist , it will also show you a message. *

PS: Do not mix the Javascript code or CSS, inside the html is VERY BAD PRACTICE.

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>

answered by 01.11.2017 в 17:00

-1

Example

  $(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>

answered by 01.11.2017 в 16:28

Load values in drop-down select with MySQL PHP and HTML Activate elements of a DATAGRIDVIEW in C # using a Database and a stored procedure

score 1 · Accepted Answer

The first thing I would do is add each task in a container so that they are separated from each other and not all "thrown" into your structure, after that I simply select the last container by means of its id and delete it with the function 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>