Como eu posso limpara a primeira operação feita para dar lugar a segunda? | jQuery

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Lucas Amaral Taylor

| 130.7k xp | 59 posts

Como eu posso limpara a primeira operação feita para dar lugar a segunda?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>MULTIPLICAÇÃO</title>
    <meta charset="utf-8">
</head>
<body>
    <fieldset>
        <form id="form">
            <label>Primeiro Número</label>
            <input type="number" name="n1" id="n1">
            <label>Segundo Número</label>
            <input type="number" name="n2" id="n2">
            <button id="botao">Multiplicar</button>
            <div id="resultado"></div>
        </form>
    </fieldset>
</body>
</html>

        $("#botao").click(function(){
            event.preventDefault();

            var div = $("#resultado");
            var formx = $("#form");
            var n1 = formx.children('input[name="n1"]').val();    
            var n2 = formx.children('input[name="n2"]').val();    

            var resultado = parseFloat(n1)*parseFloat(n2);
            var resposta = "<p> Resultado: " + n1 + "x" + n2 + " = " + resultado + "</p>";
            div.append(resposta);
        });

3 respostas

por Danilo Sales

| 384.9k xp | 70 posts

Analista desenvolvedor Senior

11/10/2018

Você pode pegar os filhos da sua div de resultado e remover eles, o código deve ficar antes de realizar o append da resposta.

Ex.:

$("#botao").click(function(){
            event.preventDefault();

            var div = $("#resultado");
            var formx = $("#form");
            var n1 = formx.children('input[name="n1"]').val();    
            var n2 = formx.children('input[name="n2"]').val();    

            var resultado = parseFloat(n1)*parseFloat(n2);
            var resposta = "<p> Resultado: " + n1 + "x" + n2 + " = " + resultado + "</p>";
            while(div.hasChildNodes()) {
                div.removeChild(div. firstChild);    
            }
            div.append(resposta);
        });

por Lucas Amaral Taylor

| 130.7k xp | 59 posts

13/10/2018

Não funcionou... O navegador deu a seguinte mensagem:

div.hasChildNodes is not a function

solução!

por Danilo Sales

| 384.9k xp | 70 posts

Analista desenvolvedor Senior

14/10/2018

Não tinha prestado atenção que estava utilizando o jquery, neste caso pode utilizar

div.empty();

No lugar de:

while(div.hasChildNodes()) {
    div.removeChild(div. firstChild);    
}

Ficando assim o seu código final:

$("#botao").click(function(){
            event.preventDefault();

            var div = $("#resultado");
            var formx = $("#form");
            var n1 = formx.children('input[name="n1"]').val();    
            var n2 = formx.children('input[name="n2"]').val();    

            var resultado = parseFloat(n1)*parseFloat(n2);
            var resposta = "<p> Resultado: " + n1 + "x" + n2 + " = " + resultado + "</p>";
            div.empty();
            div.append(resposta);
        });