Remove dynamically created html element in ajax Success

Asked

Viewed 810 times

1

I created an ajax request to dynamically create a new element li, however I have a function also in ajax to eliminate registration and in success eliminate the li valet. The problem is that, in all elements that were created dynamically, only lets delete these elements if you refresh the page. I would like to be able to delete these elements created dynamically 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>

Ajax function to create register:

$( "#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 log:

$(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);
            }
        });
    });
jquery html ajax

  • But where you own the property: ramoLi, that you get here: $('li[ramoLi=${idRamo}]');?

  • You want to delete the same one you inserted with the right ajax?

  • Yes, it deletes the ones that exist if the page has been loaded, but does not pay the ones that were created in the meantime

1 answer

1


To erase the '.collection-item' clicked just search for $(element).closest('.collection-item').remove();, where element is the this. That is to say:

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

Browser other questions tagged jquery html ajax

You are not signed in. Login or sign up in order to post.