0

Tengo un problema con el REMOVE, actualmente tengo una tabla dinámica con la cual agrego mas filas y también agregue un enlace llamado REMOVE el cual debería quitar la fila, pero actualmente no me esta realizando la función de remover, la de insertar la fila si funciona perfectamente.

Mi codigo JavaScript es el siguiente:

<script language="javascript">
        $(document).ready(function () {

            //1. Add new row
            $("#addNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#objetivos");
                var $trLast = $tableBody.find("tr:last");
                var $trNew = $trLast.clone();

                var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
                $trNew.find("td:last").html('<a href="#" id="removecell">Remove</a>');
                $.each($trNew.find(':input'), function (i, val) {
                    // Replaced Name
                    var oldN = $(this).attr('name');
                    var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                    $(this).attr('name', newN);
                    //Replaced value
                    var type = $(this).attr('type');
                    if (type.toLowerCase() == "text") {
                        $(this).attr('value', '');
                    }

                    // If you have another Type then replace with default value
                    $(this).removeClass("input-validation-error");

                });
                $trLast.after($trNew);

                // Re-assign Validation
                var form = $("form")
                    .removeData("validator")
                    .removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse(form);
            });

            // 2. Remove
            $('#removecell').live("click", function (e) {
                e.preventDefault();
                $(this).parent().parent().remove();
            });

        });
    </script>

Mi vista es la siguiente:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <br /><br />
    <div><a class="btn btn-info" href="#" id="addNew">+</a></div>
    <br />
        <table id="objetivos" class="table table-bordered table-hover">
            <tr>
                <th>Nombres</th>
                <th>Objetivos</th>
                <th>Puntaje</th>
                <th></th>
            </tr>
            @if (Model != null && Model.Count > 0)
            {
                int j = 0;
                foreach (var i in Model)
                {
                    <tr style="border:1px solid black">
                        <td>@Html.TextBoxFor(a => a[j].nombres, new { @class = "form-control"})</td>
                        <td>@Html.TextBoxFor(a => a[j].objetivos, new { @class = "form-control" })</td>
                        <td>@Html.TextBoxFor(a => a[j].puntaje, new { @class = "form-control" })</td>
                        <td>
                            @if (j > 0)
                            {
                                <a href="#" class="removecell">Remove</a>
                            }
                        </td>
                    </tr>
                    j++;
                }
            }
        </table>
        <input class="btn btn-success" type="submit" value="Save Bulk Data" />
}

Si hay alguna manera de modernizar el código JavaScript estoy abierto a todas sus propuestas desde que no pierda la funcionalidad.

4
  • que versión de jquery estas usando??
    – JuankGlezz
    Commented el 31 may. 2017 a las 20:51
  • 1.10.2, segun vi el live ya es obsoleto y se debe cambiarlo a on() sin embargo sigue sin funcionar, acabo de intentar tambien $(document).on('click', 'a.removecell', function (e) { e.preventDefault(); $(this).parent().parent().remove(); }); sin embargo sigue sin funcionar
    – ByGroxD
    Commented el 31 may. 2017 a las 20:52
  • 1
    $('.removecell') ? Commented el 31 may. 2017 a las 20:54
  • $('.removecell').on('click', 'a.removecell', function (e) { e.preventDefault(); $(this).parent().parent().remove(); }); no funciona
    – ByGroxD
    Commented el 31 may. 2017 a las 20:55

1 respuesta 1

2

El evento .live() ya no existe en jQuery 1.10.2, fue eliminado en la versión 1.9

Cambia el evento a esto:

$('#objetivos').on("click", '.removecell', function (e) {
  e.preventDefault();
  $(this).closest('tr').remove();
});

ya que el elemento es dinámico y este no carga el evento que le pertenece.

Lo que hago es seleccionar la tabla y posteriormente le asigno el evento a todo elemento con la clase removecell

$('#objetivos').on("click", '.removecell', function (e) {...});

después la función .closest('elementName') lo que hace es buscar desde el elemento seleccionado, todos los padres hasta llegar al que tenga el nombre que estoy buscando, puede ser una clase, id o nombre de etiqueta.

$(this).closest('tr').remove();
5
  • No amigo, efectivamente no me quiere funcionar no remueve
    – ByGroxD
    Commented el 31 may. 2017 a las 21:10
  • ya limpiaste la caché? Ctrl + Mayus + R o ejecutar en modo incógnito, revisa también la clase del elemento, si el elemento es seleccionado por id solo funcionara con el primero
    – JuankGlezz
    Commented el 31 may. 2017 a las 21:12
  • si señor, ya intente mediante el modo incognito y sigue sin funcionar
    – ByGroxD
    Commented el 31 may. 2017 a las 21:15
  • 1
    en el evento $("#addNew").click tienes la siguiente linea: $trNew.find("td:last").html('<a href="#" id="removecell">Remove</a>'); cambia el "id" por "class" y deberia funcionar, si no puede que tengas que agregar el evento click a ese elemento cada vez que agregues una fila
    – DanAlvarez
    Commented el 31 may. 2017 a las 21:23
  • si bro arregle esa parte pero sigue igual dando problema, dado a que es un estudio que estoy haciendo acabo de subir el link mega.nz/#!NzoWFbZI!qmEr6k2kJ5bH2sxpvx7LrMFEehuJc4l8h7Fdfkqgr5k por si quieres revisar
    – ByGroxD
    Commented el 31 may. 2017 a las 21:48

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.