Foros del Web » Programando para Internet » Jquery »

Eliminar una linea introducido anteriomente mediante javascript

Estas en el tema de Eliminar una linea introducido anteriomente mediante javascript en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/01/2018, 23:44
Avatar de Capimaster  
Fecha de Ingreso: agosto-2004
Mensajes: 493
Antigüedad: 15 años, 3 meses
Puntos: 2
Eliminar una linea introducido anteriomente mediante javascript

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
  1. $(document).ready(function()
  2.  {
  3.     $("#ingreso").delayPasteKeyUp(function(){
  4.     $.get("item.php", {ingreso: $("#ingreso").val()})
  5.         .done(function(respuesta){
  6.          if ($('#ingreso').val().length == 10) {
  7.     $("#respuesta").append('1 '+ respuesta +' <input type="hidden" name="conceptos[]" value="'+ $('#ingreso').val() +'," size="32" /><br>');
  8. } else
  9. {
  10.     $("#respuesta").append('<strong>Intenta de nuevo</strong><br>');
  11. }
  12.            
  13.             $("#ingreso").val("");
  14.         });
  15.    
  16.    
  17.  }, 10);
  18.  });
  19. }//]]>
__________________
http://www.elcapitolio.com.mx - Ocotlán, Jalisco, México
  #2 (permalink)  
Antiguo 30/01/2018, 00:25
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.430
Antigüedad: 8 años
Puntos: 930
Respuesta: Eliminar una linea introducido anteriomente mediante javascript

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
  1. <section id="respuesta">
  2.     <div class="bloque">
  3.         <input name="conceptos[]" />
  4.         <span class="eliminar">Eliminar producto</span>
  5.     </div>
  6.  
  7.     <div class="bloque">
  8.         <input name="conceptos[]" />
  9.         <span class="eliminar">Eliminar producto</span>
  10.     </div>
  11.  
  12.     <div class="bloque">
  13.         <input name="conceptos[]" />
  14.         <span class="eliminar">Eliminar producto</span>
  15.     </div>

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
  1. $("#respuesta").on("click", ".eliminar", function(){
  2.     $(this).parent(".bloque").remove();
  3. });

__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 31/01/2018 a las 22:15 Razón: Faltó una letra
  #3 (permalink)  
Antiguo 30/01/2018, 19:34
Avatar de Capimaster  
Fecha de Ingreso: agosto-2004
Mensajes: 493
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: Eliminar una linea introducido anteriomente mediante javascript

No me funciono :( ... estoy viendo que general esa funcion de .on('click', no logro hacerla funcionar
__________________
http://www.elcapitolio.com.mx - Ocotlán, Jalisco, México

Última edición por Capimaster; 30/01/2018 a las 19:49
  #4 (permalink)  
Antiguo 30/01/2018, 20:40
Avatar de Capimaster  
Fecha de Ingreso: agosto-2004
Mensajes: 493
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: Eliminar una linea introducido anteriomente mediante javascript

Logre Eliminar solo el primero con el siguiente codigo

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function(){
  8.     $("#kill").click(function(){
  9.        $(this).parent(".bloque").remove();
  10.        
  11.     });
  12. });
  13. </head>
  14.  
  15.  
  16. <section id="respuesta">
  17.     <div class="bloque">
  18.         <input name="conceptos[]" />
  19.        <button name="del" id="kill">Eliminar</button>
  20.     </div>
  21.  
  22.     <div class="bloque">
  23.         <input name="conceptos[]" />
  24.       <button name="del" id="kill">Eliminar</button>
  25.     </div>
  26.  
  27.     <div class="bloque">
  28.         <input name="conceptos[]" />
  29.        <button name="del" id="kill">Eliminar</button>
  30.     </div>
  31.  
  32. </body>
  33. </html>
__________________
http://www.elcapitolio.com.mx - Ocotlán, Jalisco, México
  #5 (permalink)  
Antiguo 30/01/2018, 22:25
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.430
Antigüedad: 8 años
Puntos: 930
Respuesta: Eliminar una linea introducido anteriomente mediante javascript

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.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #6 (permalink)  
Antiguo 31/01/2018, 09:28
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 4 meses
Puntos: 263
Respuesta: Eliminar una linea introducido anteriomente mediante javascript

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

Código HTML:
Ver original
  1. <table class="table table-striped">
  2.   <tr>
  3.     <th></th>
  4.     <th>Articulo</th>
  5.      <th>Cantidad</th>
  6.      <th></th>
  7.   </tr>
  8.   <tbody id="listaArticulos">
  9.   </tbody>
  10.  

Código Javascript:
Ver original
  1. var con = 1;
  2. function cargaProd()
  3. {
  4. 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>';
  5.  
  6. $('#listaArticulos').append(linea);
  7.  
  8. con = con+1
  9.  
  10. }
  11.  
  12. function eliminar(X){
  13. $("tr[id="+X+"]").remove();
  14. }

EJEMPLO
__________________
[email protected]
HITCEL
  #7 (permalink)  
Antiguo 31/01/2018, 20:29
Avatar de Capimaster  
Fecha de Ingreso: agosto-2004
Mensajes: 493
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: Eliminar una linea introducido anteriomente mediante javascript

Listo si pude con tu ejemplo Alexis88
me quedo asi...
Código Javascript:
Ver original
  1. $(document).ready(function()
  2.  {
  3.     $("#ingreso").delayPasteKeyUp(function(){
  4.     $.get("item.php", {ingreso: $("#ingreso").val()})
  5.         .done(function(respuesta){
  6.          if ($('#ingreso').val().length == 10) {
  7.     $("#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>');
  8. } else
  9. {
  10.     $("#respuesta").append('<strong>Intenta de nuevo</strong><br>');
  11. }
  12.            
  13.             $("#ingreso").val("");
  14.         });
  15. $("#respuesta").on("click", ".eliminar", function(){
  16.     $(this).parent(".bloque").remove();
  17.   });  
  18.    
  19.  }, 10);
  20.  });
  21. }//]]>
__________________
http://www.elcapitolio.com.mx - Ocotlán, Jalisco, México

Etiquetas: java, javascript, mediante, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:12.