CODEWITHSUNDEEP
javascriptdom
Marco Rossini
Marco Rossini

Reputation: 479

removeChild not working

Hi all i am just trying to remove my form when i click on a button but i have no results. I am sure that function "sign()" was called but with no effect on my layout:

<body>
  <div id="divSign">
    <form action="#" method="post">
      <div class="header">
        <p>All Together</p>
      </div>
      <div class="description">
        <p>Hi friend</p>
      </div>
      <div class="input">
        <input type="text" class="button" id="chiave" placeholder="Chiave Segreta">
        <input type="submit" class="button" id="submit" value="ENTRA" onclick="sign();">
      </div>
    </form>
  </div>
</body>
<script>
  function sign() {
    document.body.removeChild(document.getElementById("divSign"));
    // OR THIS
    var f = document.getElementById("divSign");
    while (f.hasChildNodes()) {
      f.removeChild(f.lastChild);
    }
    // OR THIS
    var f = document.getElementById("divSign").style.visibility = "hidden";
  }
</script>

Nothing seems affect my page, i just to clear my page after click.

Upvotes: 0

Views: 114

Answers (3)

JeanBon
JeanBon

Reputation: 15

It's not removed because the page is reloaded after your click on the button, because it's a form. To prevent that, you can use return false; at the end of your function.

function sign() {
    /*********
     Your code
    **********/
    return false; //add this line
}

Upvotes: 1

Muhammad Atif
Muhammad Atif

Reputation: 1102

With jquery you can do by using empty

$("#divSign").empty()

or 

$("#divSign form").remove()

Upvotes: -2

FrancoisBaveye
FrancoisBaveye

Reputation: 1902

On clicking, your form get submitted and the page refreshs.

Use this onclick instead, the return false; will prevent the form from being submitted and your page will not be refreshed anymore :

<input type="submit" class="button" id="submit" value="ENTRA" onclick="sign(); return false;">

Upvotes: 3

Related Questions