Button keeps on disappearing when clicked to call a javascript function

Question

 function remove() { debugger; alert('sahd'); } 

 <div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv"> <label>Abcd1</label> <input type="button" onclick="remove(); return false;" /> <label>Abcd1</label> <input type="button" onclick="remove(); return false;" /> <label>Abcd1</label> <input type="button" onclick="remove(); return false;" /> </div> 

    //javascript code
function remove() {
debugger;
alert('sahd');
}

above is my html code and javascript function. when i click on the buttons, they keep on disappearing.

Please help

Answer 1

It's an unfortunate naming thing. If you change your function name to foo (or whatever) rather than remove , it'll stop happening (see below).

The environment that onXyz handlers run in is a complex one, and one of the complexities is that your onXyz code effectively runs within a with statement using the element:

with (theElement) {
    // your code
}

There's more to it than that, but that's one aspect of it.

On modern browsers, elements have a remove method that removes them from the DOM. So that's what gets called instead of your global remove function.

Example using foo instead, so it's not the same name as the element's remove method:

 function foo() { alert('sahd'); } 

 <div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv"> <label>Abcd1</label> <input type="button" onclick="foo(); return false;" /> <label>Abcd1</label> <input type="button" onclick="foo(); return false;" /> <label>Abcd1</label> <input type="button" onclick="foo(); return false;" /> </div> 

---

This is one of many reasons to use modern event handling techniques rather than onXyz handlers. Another is that with onXyz handlers, your functions have to be globals, but the global namespace is already way too crowded and you can end up with unfortunate conflicts. With modern techniques ( addEventListener , or attachEvent on IE8 and below), you're in much more control of the environment in which your handlers run, and they don't have to be globals.

Answer 2

Because you are calling remove() javascript function.

Reference : W3Schools

Just Change function remove() to function xyz() like

 function xyz() { debugger; alert('sahd'); } 

 <div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv"> <label>Abcd1</label> <input type="button" onclick="xyz(); return false;" /> <label>Abcd1</label> <input type="button" onclick="xyz(); return false;" /> <label>Abcd1</label> <input type="button" onclick="xyz(); return false;" /> </div> 

Answer 3

You can also use anchor tag and use css to give design as a button. You just need to do as below

 <a href="javascript:remove()" id="my button" >test</a>

This could also be an alternative.

Hope this will help.