Is this a good way to instantiate a modal without leaving traces in html?

Question

The initial phase of the project I’m working on is almost over, and I’m adjusting things done in a way not very well done (gambiarras).

One of those things was that I left two modal elements of waste in my html basis to use them in the response requests, I found this very bad but only now I thought of how to get around this.

There are 3 functions within a javascript pseudo-class:

function ajaxCall(functions, settings, values) {

    $(document).trigger("onRequireByAjax");

    $.ajax({
        type: settings['method'],
        url: "callers.php",
        data: {function: functions['function'], target: functions['target'], values},
        dataType: settings['dataType'],
        success: function (data)
        {
            if (functions['action'] === 'fill-element') {
                $('.' + functions['element']).html(data);
            }
            if (functions['action'] === 'fill-modal') {
                renderModal('modal-area', data['modal']);
                $('.' + data['modal']).modal('toggle');
                $('.modal').find('.modal-title').html(data['title']);
                $('.modal').find('.modal-body').html(data['body']);
                $(document).on('hidden.bs.modal', '.' + data['modal'], function (e) {
                    e.preventDefault();
                    $(this).remove();
                });
            }
        }
    });
}

function renderModal(element, id) {
    var html = '' +
            '<div class="modal fade in ' + id + '" data-keyboard="alse" data-backdrop="static" id="full" tabindex=" - 1" role="dialog" aria-hidden="true">' +
            '<div class="modal-dialog modal-full">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>' +
            '<h4 class="modal-title"></h4>' +
            '</div>' +
            '<div class="modal-body">' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>';
    $('.' + element).append(html);
}

function destroyModal(id) {
    $('.' + id).remove();
}

The only residue I have in my html basis is a div:

<div class='modal-area'></div>

And to fire this modal I inform in the parameters of the ajaxCall method:

        var functions = {
            function: 'navigation',
            target: target,
            layer: layer,
            action: 'fill-modal'
        };
        var settings = {
            method: 'POST',
            dataType: 'json'
        };
        var values = null;
        ajaxCall(functions, settings, values);

And with an answer like that is defined the name of the modal and the content:

$rs = [
    'modal' => 'minha-modal',
    'title' =>'meu titulo',
    'body' => 'corpo da modal'
]; 

Inside the ajaxCall function and inside the call, there is an event triggered in 'Hidden.bs.modal' that removes the element that was previously inserted:

$(document).on('hidden.bs.modal', '.' + data['modal'], function (e) {
  e.preventDefault();
  $(this).remove();
});

The question was great but the doubt is simple:

• This is a good way to work with modal bootstrap without letting waste ?
• If not, what could be a more viable option ?