Building an error list

Question

I am building an error list. When click the submission button, the old errors will be removed and the new errors will be added. The following code is what I am using but it keeps adding new errors without removing the old ones: (my JS fiddle here: http://jsfiddle.net/shapeare/bc1bdq1b/)

<div id="error">
    Below is a list of errors:
</div>
<input id="submitBtn" type="submit" value="submit"/>

$(document).ready(function(){
    $index = 0;
    $(document).on('click', '#submitBtn', function(event) {
        $('#error').innerHTML = '';
        $('#error').append('<p>Error ' +  $index  +  '</p>');
        $index ++; 
    });
});

What I want to achieve is that every time the button is clicked, the old error disappears and a new error occurs. For example, the first time the submit button is clicked, "Error 0" will appear. The second time it is clicked, "Error 0" disappears and "Error 1" is shown.

Amit Joki · Accepted Answer · 2014-12-18 05:52:00Z

1

You're setting innerHTML which is not a property of jQuery but native DOM. Instead use empty which empties the $('#error'). Other options are .text('') and .html('')

$(document).ready(function(){
    $index = 0;
    $(document).on('click', '#submitBtn', function(event) {
        $('#error').empty().append('<p>Error ' +  $index  +  '</p>');
        $index++; 
    }); 
});

DEMO You could also use indexer to get the native element and then setting innerHTML but why not use something which jQuery offers when it is used?

answered Dec 18, 2014 at 5:52

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anik Islam Abhi · Accepted Answer · 2014-12-18 05:51:19Z

1

Try this

$(function(){
    $index = 0;
    $(document).on('click', '#submitBtn', function(event) {
        $('#error p').hide("slow");
        $('#error p').html("");
        $('#error p').html('<p>Error ' +  $index  +  '</p>');
        $('#error p').show("slow");
        $index ++; 
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="error">
    Below is a list of errors:
    <p></p>
</div>
<input id="submitBtn" type="submit" value="submit"/>

answered Dec 18, 2014 at 5:51

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Comments

Alex J · Accepted Answer · 2014-12-18 05:52:02Z

1

Instead of appending, you can just replace the html like so:

$(document).ready(function(){ 
    $index = 0;
    $(document).on('click', '#submitBtn', function(event) {
        $('#error').html('<p>Error ' +  $index  +  '</p>');
        $index ++; 
    });
});

answered Dec 18, 2014 at 5:52

Alex J

1,0196 silver badges10 bronze badges

Collectives™ on Stack Overflow

Building an error list

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related