Eliminar una linea introducido anteriomente mediante javascript

Capimaster · #1 (**permalink**) 29/01/2018, 23:44

Tengo una funcion para agregar lineas de productos con un input pero una vez que los agrego quiero hacer otra funcion para eliminar si algun producto quisiera cancelar..
como podria hacerlo, muchas gracias por la ayuda!

Código Javascript:

Ver original$(document).ready(function()
 {
    $("#ingreso").delayPasteKeyUp(function(){
    $.get("item.php", {ingreso: $("#ingreso").val()})
        .done(function(respuesta){
         if ($('#ingreso').val().length == 10) {
    $("#respuesta").append('1 '+ respuesta +' <input type="hidden" name="conceptos[]" value="'+ $('#ingreso').val() +'," size="32" /><br>');
} else
{
    $("#respuesta").append('<strong>Intenta de nuevo</strong><br>');
}
            
            $("#ingreso").val("");
        });
    
    
 }, 10);
 });
}//]]>

Alexis88 · #2 (**permalink**) 30/01/2018, 00:25

Sería más sencillo si cada elemento que agregaras se encontrara dentro de un bloque junto a un botón para poder eliminarlo y todo ese bloque sería el que añadirías al elemento con el identificador "respuesta".

Por ejemplo, supongamos que añadiste tres elementos de esa forma:

Código HTML:

Ver original<section id="respuesta">
    <div class="bloque">
        <input name="conceptos[]" />
        <span class="eliminar">Eliminar producto</span>
    </div>
 
    <div class="bloque">
        <input name="conceptos[]" />
        <span class="eliminar">Eliminar producto</span>
    </div>
 
    <div class="bloque">
        <input name="conceptos[]" />
        <span class="eliminar">Eliminar producto</span>
    </div>
</section>

Bastaría con que registraras el evento click al elemento <section id="respuesta">, delegaras el evento a los elementos con la clase "bloque" (se verá afectado el <span class="eliminar"> pulsado), hallaras al elemento que lo contiene (el <div class="bloque"> respectivo) y procedieras a eliminarlo utilizando un método como .remove():

Código Javascript:

Ver original$("#respuesta").on("click", ".eliminar", function(){
    $(this).parent(".bloque").remove();
});

Capimaster · #3 (**permalink**) 30/01/2018, 19:34

No me funciono :( ... estoy viendo que general esa funcion de .on('click', no logro hacerla funcionar

Capimaster · #4 (**permalink**) 30/01/2018, 20:40

Logre Eliminar solo el primero con el siguiente codigo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#kill").click(function(){
       $(this).parent(".bloque").remove();
       
    });
});
</script>
</head>
 
<body>
 
<section id="respuesta">
    <div class="bloque">
        <input name="conceptos[]" />
       <button name="del" id="kill">Eliminar</button>
    </div>
 
    <div class="bloque">
        <input name="conceptos[]" />
      <button name="del" id="kill">Eliminar</button>
    </div>
 
    <div class="bloque">
        <input name="conceptos[]" />
       <button name="del" id="kill">Eliminar</button>
    </div>
</section>
 
</body>
</html>

Alexis88 · #5 (**permalink**) 30/01/2018, 22:25

En realidad, el ejemplo que te mostré sí funciona y aquí puedes verlo. En cambio, en el tuyo solo funciona con el primer elemento puesto que, al cometer el error de repetir el valor del id (debe ser un valor único en todo el documento), solo se termina afectando al primer elemento que lo posea.

Muéstranos el primer intento que hiciste para ayudarte a hallar el error.

xfxstudios · #6 (**permalink**) 31/01/2018, 09:28

Debes crearle un id temporala cada linea para luego identificarla durante el proiceso de eliminacion:

Código HTML:

Ver original<table class="table table-striped">
  <tr>
    <th>Nº</th>
    <th>Articulo</th>
     <th>Cantidad</th>
     <th></th>
  </tr>
  <tbody id="listaArticulos">
  </tbody>
  
</table>

Código Javascript:

Ver originalvar con = 1;
function cargaProd()
{
var linea = '<tr id="'+con+'" ><td>'+con+'</td><td><input type="text" name="articulo[]" placeholder=" Articulo" class="form-control"/></td><td><input type="text" name="cantidad[]" placeholder="Cantidad" class="form-control"/></td><td><button id="'+con+'" onClick="eliminar(this.id)" class="btn bg-danger">Eliminar</button></td></tr>';
 
$('#listaArticulos').append(linea);
 
con = con+1
 
}
 
function eliminar(X){
$("tr[id="+X+"]").remove();
}

EJEMPLO

Capimaster · #7 (**permalink**) 31/01/2018, 20:29

Listo si pude con tu ejemplo Alexis88
me quedo asi...

Código Javascript:

Ver original$(document).ready(function()
 {
    $("#ingreso").delayPasteKeyUp(function(){
    $.get("item.php", {ingreso: $("#ingreso").val()})
        .done(function(respuesta){
         if ($('#ingreso').val().length == 10) {
    $("#respuesta").append('<div class="bloque"><label>1 '+ respuesta +' <input type="hidden" name="conceptos[]" value="'+ $('#ingreso').val() +'," size="32" /></label><span class="eliminar">Eliminar</span></div>');
} else
{
    $("#respuesta").append('<strong>Intenta de nuevo</strong><br>');
}
            
            $("#ingreso").val("");
        });
$("#respuesta").on("click", ".eliminar", function(){
    $(this).parent(".bloque").remove();
  });   
    
 }, 10);
 });
}//]]>