Cómo agregar, editar y eliminar campos html dinámicamente usando JQuery

En este post veremos cómo agregar y eliminar campos dinámicamente jquery, normalmente en un proyecto damos opciones a los usuarios para agregar varias filas y enviarlas a la base de datos, aquí estoy creando una funcionalidad para agregar y eliminar una fila estática. No mostrare código de servidor para almacenar datos en la base de datos, solo te estoy ayudando a agregar una fila dinámica en el contenedor HTML.


Artículos de interés:

En seguida puedes copiar el ejemplo completo para que hagas pruebas en tu equipo




<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title> Dynamic Add Controls HTML</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
</head>
<body>

    <div class="container" style="min-height:650px;">
        <div style='margin-bottom:100px'>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- responsive-header -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-5044208028083716"
                 data-ad-slot="8330817881"
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>

        </div><div class="col-sm-8"><h1>Source code: Dynamic Add Row</h1></div>

        <div class="col-sm-8" id="container2">
            <div id="type_container">
                <div class="row form-group" id="edit-0">
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Brand :
                        </label>
                    </div>
                    <div class="col-md-3">
                        <select data-placeholder="Choose an Type..." class="form-control" name="">
                            <option disabled="disabled" selected="selected" value="0">Select</option>
                            <optgroup label="Swedish Cars">
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </optgroup>
                            <optgroup label="German Cars">
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Point :
                        </label>
                    </div>
                    <div class="col-md-5 clearfix">
                        <div class="row col-md-3">
                            <input type="text" maxlength='5' class="form-control input-sm" name="" value="0" />
                        </div>

                        <div class="col-md-3 control-label">

                            <a class="add-type pull-right" href="javascript: void(0)" tiitle="Click to add more"><i class="glyphicon glyphicon-plus-sign"></i></a>

                        </div>
                    </div>
                </div>
            </div>


            <div id="type-container" class="hide">
                <div class="row form-group type-row" id="">
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Brand :
                        </label>
                    </div>
                    <div class="col-md-3">
                        <select data-placeholder="Choose an Type..." class="form-control" name="">
                            <option disabled="disabled" selected="selected" value="0">Select</option>
                            <optgroup label="Swedish Cars">
                                <option value="volvo">Volvo</option>
                                <option value="saab">Saab</option>
                            </optgroup>
                            <optgroup label="German Cars">
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-md-2 control-label">
                        <label for="username" class="control-label">
                            Point :
                        </label>
                    </div>
                    <div class="col-md-5 clearfix">
                        <div class="row col-md-3">
                            <input type="text" maxlength='5' class="form-control input-sm" name="" value="0" />
                        </div>
                        <div class="col-md-3 control-label"><a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)"><i class="glyphicon glyphicon-trash"></i></a></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            jQuery(document).ready(function () {
                var doc = $(document);
                jQuery('a.add-type').die('click').live('click', function (e) {
                    e.preventDefault();
                    var content = jQuery('#type-container .type-row'),
                        element = null;
                    for (var i = 0; i < 1; i++) {
                        element = content.clone();
                        var type_div = 'teams_' + jQuery.now();
                        element.attr('id', type_div);
                        element.find('.remove-type').attr('targetDiv', type_div);
                        element.appendTo('#type_container');

                    }
                });

                jQuery(".remove-type").die('click').live('click', function (e) {
                    var didConfirm = confirm("Are you sure You want to delete");
                    if (didConfirm == true) {
                        var id = jQuery(this).attr('data-id');
                        var targetDiv = jQuery(this).attr('targetDiv');
                        //if (id == 0) {
                        //var trID = jQuery(this).parents("tr").attr('id');
                        jQuery('#' + targetDiv).remove();
                        // }
                        return true;
                    } else {
                        return false;
                    }
                });

            });
        </script>
    </div>
</body>
</html>

Artículos relacionados
Cambiar el valor seleccionado en un combobox o select con javascript y jquery
Cambiar el valor seleccionado en un combobox o select con javascript y jquery

En html existe un control llamado select y alg

¿Cómo eliminar etiquetas HTML de una cadena de texto con JavaScript?
¿Cómo eliminar etiquetas HTML de una cadena de texto con JavaScript?

En el artículo anterior vimos ¿Cómo eliminar

2 Comentarios
Enviame un comentario