Remove html element created dynamically in ajax success

Question

Remove html element created dynamically in ajax success

Navigation

#1 by (1 votes)

1

I created an ajax request for success to dynamically create a new li element, however I also have a function in ajax to delete the registry and in success remove the li created. The problem is that, in all elements that were created dynamically, only lets them erase those elements if you refresh the page. I would like to be able to delete those dynamically created elements without having to refresh the page.

Follow the example:

HTML:

<ul class="collection with-header">
        <li class="collection-header">
            <h4>Ramos <a href="#addRamo" class="secondary-content"><i class="material-icons">library_add</i></a></h4>
        </li>
                                            <li class="collection-item" ramoli="1">
                    <div>Especialização em Tecnologias
                        <input name="ramos[]" type="hidden" value="1">
                        <a href="#!" class="secondary-content"><i class="material-icons">edit</i></a>
                        <a href="javascript: void(0)" ramo="1" class="deleteRamo secondary-content"><i class="material-icons">delete</i></a>
                    </div>
                </li>
                                <li class="collection-item" ramoli="2">
                    <div>Especialização em Cultura e Artes
                        <input name="ramos[]" type="hidden" value="2">
                        <a href="#!" class="secondary-content"><i class="material-icons">edit</i></a>
                        <a href="javascript: void(0)" ramo="2" class="deleteRamo secondary-content"><i class="material-icons">delete</i></a>
                    </div>
                </li>
                                <li class="collection-item" ramoli="3">
                    <div>Especialização em Música Interactiva e Design de Som
                        <input name="ramos[]" type="hidden" value="3">
                        <a href="#!" class="secondary-content"><i class="material-icons">edit</i></a>
                        <a href="javascript: void(0)" ramo="3" class="deleteRamo secondary-content"><i class="material-icons">delete</i></a>
                    </div>
                </li>
                                <li class="collection-item" ramoli="4">
                    <div>Especialização em Educação
                        <input name="ramos[]" type="hidden" value="4">
                        <a href="#!" class="secondary-content"><i class="material-icons">edit</i></a>
                        <a href="javascript: void(0)" ramo="4" class="deleteRamo secondary-content"><i class="material-icons">delete</i></a>
                    </div>
                </li>


                    <li class="collection-item">
                        <div>Registo dinamico
                            <a href="#!" class="secondary-content"><i class="material-icons">edit</i></a>
                            <a href="javascript: void(0)" ramo="38" class="deleteRamo secondary-content"><i class="material-icons">delete</i></a>
                        </div>
                </li></ul>

Function in ajax to create registry:

$( "#btnAddRamo" ).on('click', function(event) {
        event.preventDefault();
        $.ajax({
            url: '/admin/config/ramos',
            type: 'POST',
            data: $('#formAddRamo').serialize(),
            dataType: 'json',
            success: function( _response ){
                $("#collection-ramos ul").append('
                    <li class="collection-item">
                        <div>${_response.data.name}
                            <a href="#!" class="secondary-content"><i class="material-icons">edit</i></a>
                            <a href="javascript: void(0)" ramo="${_response.data.id}" class="deleteRamo secondary-content"><i class="material-icons">delete</i></a>
                        </div>
                </li>');
                Materialize.toast(_response.message, 4000);
            },
            error: function( _response ){
                // Handle error
            }
        });
    });

Ajax function to delete registry:

$(document).on('click', '.deleteRamo',function(event) {
        event.preventDefault();
        let idRamo = jQuery(this).attr('ramo');
        let element = $('li[ramoLi=${idRamo}]');

        let currentToken = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            url: '/admin/config/ramos/${idRamo}',
            type: 'DELETE',
            data: {_token:currentToken},
            dataType: 'json',
            success: function( _response ){
                $(element).remove();
                Materialize.toast(_response.message, 4000);
            },
            error: function( _response ){
                Materialize.toast(_response.message, 4000);
            }
        });
    });

html jquery ajax

asked by anonymous 22.06.2017 / 13:20

1 answer

Does anyone explain this message from git, after a pull to develop it? Identify the EOF in a DataInputStream

score 1 · Accepted Answer

To delete% clicked% just search for '.collection-item' , where $(element).closest('.collection-item').remove(); is element . That is:

$(document).on('click', '.deleteRamo',function(event) {
    event.preventDefault();
    const idRamo = jQuery(this).attr('ramo');
    const element = this;

    const currentToken = $('meta[name="csrf-token"]').attr('content');
    $.ajax({
        url: '/admin/config/ramos/${idRamo}',
        type: 'DELETE',
        data: {_token:currentToken},
        dataType: 'json',
        success: function( _response ){
            $(element).closest('.collection-item').remove();
            Materialize.toast(_response.message, 4000);
        },
        error: function( _response ){
            Materialize.toast(_response.message, 4000);
        }
    });
});