Jquery code for click event not working

in my current spring project, I have a jsp page with this content:

<c:url value="/${command['class'].simpleName}/index" var="index"/>
<button type="button" class="btn btn-default action" data-url="${index}">Voltar</button>

<c:url value="/${command['class'].simpleName}/delete" var="remove"/>
<form class="form" role="form" method="post" action="${remove}">
    <input type="hidden" name="id" value="${command.id}"/>
    <div class="panel panel-default pergunta">
        <div class="panel-heading">Remo&ccedil;&atilde;o</div>
        <div class="panel-body">
            <p>Confirma remo&ccedil;&atilde;o do registro abaixo?</p>
        </div>
        <ul class="list-group">
            <c:forEach var="item" items="${command['class'].declaredFields}">
                <c:set var="field" value="${item.name}"/>
                <c:if test="${field != 'role' && field != 'permission'}">
                    <li class="list-group-item"><strong>${item.name}</strong>: ${command[item.name]}</li>
                </c:if>
            </c:forEach>
        </ul>
        <div class="panel-footer">
            <button type="submit" class="btn btn-lg btn-link" id="sim">Sim</button>
            <button type="button" class="btn btn-lg btn-link" id="nao">N&atilde;o</button>
        </div>
    </div>
</form>

<div class="alert alert-success alert-dismissible" id="yes" role="alert" style="display: none;">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    Registro removido com sucesso.
</div>
<div class="alert alert-danger alert-dismissible" id="not" role="alert" style="display: none;">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <span class="text"></span>
</div>

      

        
        
        
      

    

clicks in buttons ( class="btn btn-default"

) are handled by this jquery code:

$(document).ready(function(){
    $(document).on("submit", "form.form", function (event) {
        event.preventDefault();
        var $form = $( this ), url = $form.attr( "action" );
        var posting = $.post( url, $(this).serialize() );
        posting.done(function( data ) {
            $("div.pergunta").hide();
            if(data == "") {
                $("#yes").show();
            } else {
                var $temp  = $('<div/>', {html:data});
                $("#not").find(".text").html( $temp.remove('head').html() );
                $("#not").show();
            }
        });
    });
    $(document).on("click", "button.action", function(event){
        event.preventDefault();
        var url = $(this).data("url");
        $.get(url, function(data){
            var target = $("div.panel-default");
            var $temp  = $('<div/>', {html:data});
            target.empty();
            target.html( $temp.remove('head').html() );
        });
    });
    $(document).on("click", "#nao", function(event){
        event.preventDefault();
        $("div.pergunta").hide();
    });
});

      

        
        
        
      

    

but the instruction $("div.pergunta").hide()

doesn't work.

the above page is added to this page inside <div>

with a class panel panel-default

:

<div class="panel panel-default">
    <div class="panel-heading">${command['class'].simpleName}</div>
    <div class="panel-body">
        <c:url value="/${command['class'].simpleName}/cadastra" var="cadastrar"/>
        <div align="left"> <button type="button" class="btn btn-default action" data-url="${cadastrar}">cadastrar</button> </div>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th></th>
                <c:forEach var="item" items="${command['class'].declaredFields}">
                    <c:set var="field" value="${item.name}"/>
                    <c:if test="${field != 'role' && field != 'permission'}">
                        <th>${item.name}</th>
                    </c:if>
                </c:forEach>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <c:forEach var="item" items="${lista}">
                <tr>
                    <td></td>
                    <c:forEach var="item2" items="${command['class'].declaredFields}">
                        <c:set var="field" value="${item2.name}"/>
                        <c:if test="${field != 'role' && field != 'permission'}">
                            <td>${item[field]}</td>
                        </c:if>
                    </c:forEach>
                    <td>
                        <div class="btn-group">
                            <c:url value="/${command['class'].simpleName}/altera" var="alterar"/>
                            <button type="button" class="btn btn-default action" data-url="${alterar}/${item.id}">alterar</button>

                            <c:url value="/${command['class'].simpleName}/remove" var="remover"/>
                            <button type="button" class="btn btn-default action" data-url="${remover}/${item.id}">remover</button>
                        </div>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</div>

<script>
$(document).ready(function(){
    $(document).on("click", "button.action", function(event){
        event.preventDefault();
        var url = $(this).data("url");
        $.get(url, function(data){
            var target = $("div.panel-default");
            var $temp  = $('<div/>', {html:data});
            target.empty();
            target.html( $temp.remove('head').html() );
        });
    });
});
</script>

      

        
        
        
      

    

can anyone give a hint on how to make this code from div.pergunta

?