reset a dynamic array with jQuery

Question

I have a function that pushes a dynamic amount of numbers into an array when I click a button, the code looks like this:

$('#calculate').click(function(e) {

var foo = $(".foo"),
    A = [],
    B = [];

    //Push values
foo.each(function(){
  var $t = $(this),
    num = $t.val(),
    xnum = num * 2.42;
  A.push(xnum);
  B.push(num);
});

//more stuff down here... 
//.ajax() to run and print a calculation

I'm getting these values from <select> menus and then I have a button that removes the <select> menu that it accompanies using the .empty() function...

I run into a problem when I calculate, THEN delete one of the <select> menus and recalculate... The value from the deleted <select> is still included in my calculation!

I figured the easiest way to reset the array would be to use:

A.length = 0;
B.length = 0;

But for some reason these aren't reseting the arrays and the old values are still included in the new calculation...

Is there a better way I can totally clear the array before I start pushing items into it?

@VisioN aren't I already doing that in the first few lines under var foo = $(".foo") — tcd
– tcd, Commented Aug 26, 2012 at 19:33
OK. Can you make a JSFiddle demo? That will be easier to answer. — VisioN
– VisioN, Commented Aug 26, 2012 at 19:34
I have a ton of code in my actual application... I could simplify it down though... give me a couple minutes! haha — tcd
– tcd, Commented Aug 26, 2012 at 19:35
@tdun AVOID having multiple ID in a single page! (#remove) Use class instead. — Roko C. Buljan
– Roko C. Buljan, Commented Aug 26, 2012 at 20:00

The Alpha · Accepted Answer · 2012-08-26 20:04:56Z

1

Try this

$(document).on("click", "#remove", function() {
    $this=$(this);
    $this.parent('.foowrap').fadeOut(function() {
        $this.parent('.foowrap').empty();
    });
});

Update: Use class .remove instead of id #remove, id meant to be unique.

DEMO.

edited Aug 26, 2012 at 20:04

answered Aug 26, 2012 at 19:53

The Alpha

147k30 gold badges294 silver badges313 bronze badges

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

3 Comments

tcd Over a year ago

Works perfectly, thank you very much! Why does this fix it? Just adding in $this=$(this); changed it all...???

The Alpha Over a year ago

You've used $(this) inside the callback function, wrong variable scope.

Roko C. Buljan Over a year ago

@tdun look for your answer to my comment at david's answer.

Dave L. · Accepted Answer · 2012-08-26 20:05:16Z

1

I would modify the other answer to be more like this:

$(".remove").click(function() {
  $(this).parent('.foowrap').fadeOut(function() {
    $(this).empty();
  });
});

Notice, it avoids two calls to parent and the global variable and adds the missing semicolon.

EDIT: saw you had 2 elements with the same id so changed my code to assume you will change remove to a class.

edited Aug 26, 2012 at 20:05

answered Aug 26, 2012 at 20:00

Dave L.

9,8408 gold badges48 silver badges70 bronze badges

4 Comments

Roko C. Buljan Over a year ago

Actually ... it's not a two calls to parent but the real issue was that the second one: $(this).parent('.foowrap') was searching for a .foowrap parent of .foowrap that was actually unexistant - and the method .empty() was never pointing to the right parent.

Dave L. Over a year ago

@Roko -- I know the other answer solves it; I was merely improving upon that answer, which is technically correct but is not perfect.

tcd Over a year ago

Both of the $(this) refer to the .remove button and my function is emptying the entire .foowrap, then each of the .parent() call to the .foowrap containing the remove button- right?

Dave L. Over a year ago

@tdun -- No, the first $(this) refers to the remove button; the second $(this) refers to .foowrap div.

Collectives™ on Stack Overflow

reset a dynamic array with jQuery

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related