I want to dynamically delete a row in a form

Question

I want to dynamically delete a row in a form

Navigation

#1 by (0 votes)

0

I want to dynamically delete a row in a form created in Codeigniter .

The problem is that it works for me, removing a div , but when trying to format it, I include bootstrap, so it eliminates the previous div and not the whole row.

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

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

jquery bootstrap codeigniter-3

asked by Delvis Díaz 11.04.2018 в 20:09

source

1 answer

Error in PHP, constant T_PAAMAYIM_NEKUDOTAYIM How to create these objects within a Fragment

score 0 · Accepted Answer

I modified your code a bit and it worked, the javascript script was like this:

    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--;
});

What I did was to extract the variables and the onclick function from the document ready so that the jquery selectors could detect the elements of the DOM properly:

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