Why my jQuery empty doesn't work?

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>

<button type="button" onclick="submit();">launch</button>
<button type="button" onclick="clear();">clear</button>


<div>
    Result:<br>
    <div id="result">
    </div>
</div>
<script>
    function clear() {
        $('#result').empty()
    }

    function submit() {
        $('#result').append('<div>xxxxx</div>')
    }
</script>
</body>
</html>

Launch button works well but clear doesn't. I run $('#result').empty() in console, it clear the div as expected.

You may debug my code in jsfiddle.

I checked out your fiddle.. That's totally bizarre. I stuck a console.log in clear() and it's never getting called.. — mejdev, Apr 12 '16 at 13:09
Rename the function `clear()` to something else. Than it will work. — node_modules, Apr 12 '16 at 13:10
Dang.. Don't everyone answer at once. 5 answers within a minute! — mejdev, Apr 12 '16 at 13:12
@mjohnsonengr Everyones running for upvotes and accepted answers :P — node_modules, Apr 12 '16 at 13:12
@C0dekid.php that's fine, but you were definitely the first here with the info on clear() being taken!! — mejdev, Apr 12 '16 at 13:13
@mjohnsonengr I know, I was about to post the answer, but then this post exploded and everybody took the shine. — node_modules, Apr 12 '16 at 13:14

MrCode · Accepted Answer · 2016-04-12T13:25:22.427

11

Calling clear() in an inline handler is actually calling something else called document.clear(), and so your function is never called.

This is because in an inline handler, document is in scope before window and your clear function is in the global scope, which is window for browsers.

You can change the function name to something else

<button type="button" onclick="myClear();">clear</button>

function myClear() {
    $('#result').empty()
}

Alternatively I would prefer to avoid inline handlers and also avoid polluting the global scope.

$(function(){
    function clear() {
        $('#result').empty();
    }

    $('.clear').click(function(){
        clear();
    });
});

edited Apr 12 '16 at 13:25

answered Apr 12 '16 at 13:11

MrCode

63,975
10
90
112

`window.clear` has to be called if it works as supposed, since the global object is window, not document. – Rajaprabhu Aravindasamy Apr 12 '16 at 13:13
I Agree that, https://jsfiddle.net/oe7huw4q/16/ – Rajaprabhu Aravindasamy Apr 12 '16 at 13:19

Adrien Brunelat · Answer 2 · 2016-04-12T13:28:16.520

2

It's because clear is calling the function document.clear() which comes first in the considered scope that is inline HTML call.

Try to rename your function it to anything else.

edited Apr 12 '16 at 13:28

answered Apr 12 '16 at 13:11

Adrien Brunelat

4,492
4
29
42

score 1 · Answer 3 · answered Apr 12 '16 at 13:11

1

clear is a reserved word, rename it to something else

answered Apr 12 '16 at 13:11

rorypicko

4,194
3
26
43

score 1 · Answer 4 · answered Apr 12 '16 at 13:11

1

Seems like your .empty() is working. The problem here is clear() function is not getting called. I tried changing clear() to clear1() and it worked.

answered Apr 12 '16 at 13:11

Prachi Tailor

41
4

score 0 · Answer 5 · answered Apr 12 '16 at 13:10

0

Just set it using

$('.textboxElement').val("");

instead of clear. I'm not sure why your clear isn't working, but this is another way of doing it. Maybe your method name is being picked up? Try naming it to 'foo'

answered Apr 12 '16 at 13:10

TechnicalTophat

1,655
1
15
37

`.val()` only works with form elements, not with dividers and other static elements other than form elements. – node_modules Apr 12 '16 at 13:13
@C0dekid.php I would have expected it to work with textboxes full stop... – TechnicalTophat Apr 12 '16 at 13:14
1

@Anonymouse yes, as you say it works with textboxes, not with plain text. `val()` means `value` wich form inputs/textboxes has. – node_modules Apr 12 '16 at 13:15
1

@C0dekid.php Oh right, apologies I didn't know that. Guess I learn something new every day :-) – TechnicalTophat Apr 12 '16 at 13:16
It's ok ^^. We are here to learn right? :) @Anonymouse – node_modules Apr 12 '16 at 13:17
@C0dekid.php so we are :-). – TechnicalTophat Apr 12 '16 at 13:18

score 0 · Answer 6 · answered Apr 12 '16 at 13:15

0

The problem is your function name. "Clear" is already defined as document.clear so it is not hitting your code. Rename your function to something like clearContent.

answered Apr 12 '16 at 13:15

hooda

105
6

Why my jQuery empty doesn't work?

6 Answers6