Remove specific inputs after $.ajax call

Question

I have build some inputs to let the user search the database. The search is using ajax request.

The problem that I have is because when I get the response from the server I also get the search inputs. I don't want that.

Take a look to my code:.

    <script>
    $(document).on('change', '.auto-select', function(e){

        e.preventDefault();

        var tags = $('#auto-tag-script').serialize();
        var contracts = $('#auto-contract-script').serialize();
        var educations =  $('#auto-education-script').serialize();
        var towns = $('#auto-town-script').serialize();

        runAjax(tags, contracts, educations, towns);

    });

    function runAjax(tags, contracts, educations, towns) {
        $.ajax({
            url: 'http://localhost/jobs/public/anazitisi-ergasias?' + tags + '&' + contracts + '&' + educations + '&' + towns
        }).done(function(data){

            $('div.show-html-from-ajax').html(data);

        });

    }

</script>

With the above code the inputs appears again in my page.

Is there any way to escape this form inputs.

Answer 1

You can hide it 2 ways...before you insert it (best way) or after you insert it

    $.ajax({
        url: '...'
    }).done(function(data){
        // create jQuery object from response
        var $html = $(data);
        //hide within that object
        $html.find('.search-form-for-hide').hide();
        // insert the object
        $('div.show-html-from-ajax').html($html);
         /*******   OR ***************/
        //  the html is in the DOM now, can do whatever might be needed to it
        $('.search-form-for-hide').hide();

    });

For many plugins you would need to insert first and then call the plugin

Answer 2

With jQuery, you can implicitly convert a DOM object or html string to a jQuery object by using $(data) or jQuery(data) (See this doc). Then use $(data).find('.search-form-for-hide').hide() to find the element and hide it.