0

Deseo eliminar dinamicamente una fila en un formulario creado en Codeigniter.

El problema es que me funciona eliminado un div, pero al intentar darle el formato necesario incluyo bootstrap entonces me elimina el div anterior y no el row completo.

<div id="mixes">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                   <input type="text" class="form-control" id="mix" name="mix[]">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" id="cant" name="cant[]">
                                                    </div>
                                                </div>
                            <div class="col-sm-1">
                                <div class="form-group">
                                    <button type="button" class="btn btn-default" id="add_mix" value="adicionar">
                                        <i class="fa fa-plus"></i>
                                        </button>
                                </div>
                            </div> 
                        </div>
                    </div>

y el script:

<script type="text/javascript">
 var max_mix = 5;   //max 5 row

    var x = 0;
    $('#add_mix').click (function(e) {
            e.preventDefault();     //prevenir nuevos clicks
            if (x < max_mix) {
                    $('#mixes').append('<div class="row">\
                                            <div class="col-sm-6">\
                                                <div class="form-group">\
                                                    <input type="text" 
 class="form-control" id="mix" name="mix[]">\
                                                </div>\
                                            </div>\
                                            <div class="col-sm-4">\
                                                <div class="form-group">\
                                                    <input type="text" 
  class="form-control" id="cant" name="cant[]">\
                                                </div>\
                                            </div>\
                                            <div class="col-sm-1">\
                                                <div class="form-group">\
                                                    <a href="#" 
   class="del_mix btn btn-default"><i class="fa fa-trash"></i></a>\
                                                </div>\
                                            </div>\
                                         </div>');
                    x++;
            }
    });
    // Remover el div anterior
    $('#mixes').on("click",".del_mix",function(e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
    });

</script>
7
  • Poner el código en formato adecuado además de incluir la condición del IF podría ayudar a que alguien solvente tu pregunta. Commented el 11 abr. 2018 a las 18:20
  • De alguna forma puse el codigo de php y no me lo muestra Commented el 11 abr. 2018 a las 18:27
  • como pudiera decir aca $(this).parent('div').remove(); que quiero eliminar el <div class="row"> entero Commented el 11 abr. 2018 a las 18:30
  • @DelvisDíaz, ¿no le puedes agregar un Id al <div class="row"> y lo eliminas por Id? Commented el 11 abr. 2018 a las 20:14
  • y como llamaria al id en el script??? Commented el 13 abr. 2018 a las 14:28

1 respuesta 1

0

Modifiqué un poco tu código y funcionó, el script de javascript quedó así:

    var max_mix = 5;   //max 5 row

    var x = 0;

    $(document).ready(function(){

$('#add_mix').click (function(e) {
        e.preventDefault();     //prevenir nuevos clicks
        if (x < max_mix) {
                $('#mixes').append('<div class="row">\
                                        <div class="col-sm-6">\
                                            <div class="form-group">\
                                                <input type="text" class="form-control" id="mix" name="mix[]">\
                                            </div>\
                                        </div>\
                                        <div class="col-sm-4">\
                                            <div class="form-group">\
                                                <input type="text" class="form-control" id="cant" name="cant[]">\
                                            </div>\
                                        </div>\
                                        <div class="col-sm-1">\
                                            <div class="form-group">\
                                                <a href="#" class="del_mix btn btn-default"><i class="fa fa-trash"></i></a>\
                                            </div>\
                                        </div>\
                                     </div>');
                x++;
        }
});


    });

    // Remover el div anterior
$(document).on("click",".del_mix",function(e) {

        e.preventDefault();
        $(this).parent('div').parent('div').parent('div').remove();
        x--;
});

Lo que hice fue sacar la variables y la función onclick del document ready para que los selectores de jquery pudieran detectar los elementos del DOM apropiadamente:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous"></script>

	<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

<style type="text/css">
	.form-group{
		background-color: #999;
	}
	.col-sm-1{
		background-color: #f00;
	}
	.row{
		background-color: #00f;
	}
</style>

	<script type="text/javascript">

		var max_mix = 5;   //max 5 row

   		var x = 0;

		$(document).ready(function(){

    $('#add_mix').click (function(e) {
            e.preventDefault();     //prevenir nuevos clicks
            if (x < max_mix) {
                    $('#mixes').append('<div class="row">\
                                            <div class="col-sm-6">\
                                                <div class="form-group">\
                                                    <input type="text" class="form-control" id="mix" name="mix[]">\
                                                </div>\
                                            </div>\
                                            <div class="col-sm-4">\
                                                <div class="form-group">\
                                                    <input type="text" class="form-control" id="cant" name="cant[]">\
                                                </div>\
                                            </div>\
                                            <div class="col-sm-1">\
                                                <div class="form-group">\
                                                    <a href="#" class="del_mix btn btn-default"><i class="fa fa-trash"></i></a>\
                                                </div>\
                                            </div>\
                                         </div>');
                    x++;
            }
    });
    

		});

		// Remover el div anterior
    $(document).on("click",".del_mix",function(e) {
    		
            e.preventDefault();
            $(this).parent('div').parent('div').parent('div').remove();
            x--;
    });
 

   

</script>
</head>
<body>

	<div id="mixes">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                   <input type="text" class="form-control" id="mix" name="mix[]">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" id="cant" name="cant[]">
                                                    </div>
                                                </div>
                            <div class="col-sm-1">
                                <div class="form-group">
                                    <button type="button" class="btn btn-default" id="add_mix" value="adicionar">
                                        <i class="fa fa-plus"></i>
                                        </button>
                                </div>
                            </div> 
                        </div>
                    </div>



</body>
</html>

6
  • Ahora solo me elimina el <div class="form-group"> <button type="button" class="btn btn-default" id="add_mix" value="adicionar"> <i class="fa fa-plus"></i> </button> </div> Commented el 11 abr. 2018 a las 18:33
  • probé lo que me sugirió dijo y no hace nada... Commented el 11 abr. 2018 a las 18:34
  • Modifiqué mi respuesta a ver si te sirve Commented el 11 abr. 2018 a las 20:08
  • aun nada... si lo dejo como lo tengo elimina el div que contiene el boton, puse el ultimo que me sugirio y tampoco hace nada, es como si los parent concatenados no los reconociera... Commented el 13 abr. 2018 a las 14:25
  • Chécalo de nuevo, lo volví a modificar Commented el 17 abr. 2018 a las 20:02

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.