JQuery Having trouble inserting dom elements after removing them

[sunny124]

Hi,

I have a checkbox where if a user clicks it, the address fields gets removed and if he clicks it again, it should add those address fields back.

I can get it to remove it successfully but when I try to add those fields back, I get [object Object] displayed instead.

var detached_fields = '';
                //$("input[name='online_only_bus']") is the checkbox
                $("input[name='online_only_bus']").click(function(){
                if($(this).is(':checked')){
                    $('.detach_field').each(function(){
                       //removes 10 elements correctly
                       detached_fields += $(this).remove();
                    });
                }
                else if($(this+':not:checked')){
                   console.log(detached_fields); //outputs [object Object] 10 times
                   $("input[name='online_only_bus']").after(detached_fields);
//displays on the form [object Object] 10 times instead of displaying the elements
                }
            });

for each of the address fields and its <tr> I have added a class called detach_field

If anyone can help me out or point me in the right direction as to how to remove and add elements correctly, I'd appreciate it.

Thankyou.

[hielo]

detached_fields += $(this).remove();

that's your problem. You can concatenate STRINGS, but NOT objects. remove() returns an object. Since you are issuing a concatenation operator, javascript calls its toString() method which simply returns a string whose value is [object Object] . What you need is the ACTUAL objects. Make detached_fields an array, and then as you remove an item add/push it to that array. In your else clause, you need to iterate over the array, popping one item at a time. As you pop each item, add it back to your form.

[Airshow]

There's no need to remove anything. Instead just .hide(), then the elements are right there in the same place in the DOM and can be shown again with .show().

$("input[name='online_only_bus']").click(function(){
  if($(this).is(':checked')){ $('.detach_field').hide(); }
  else{ $('.detach_field').show(); }
});

Airshow

[sunny124]

Thanks for replying guys.

I can't use hide() and show() because some of those detached fields are required fields by default. If the user clicks the check box, then those fields are no longer needed on the form. If I use hide() to hide those fields, the form won't validate, therefore I need to remove those fields instead.

Thanks guys once again for replying and thanks hielo for pointing me in the right direction.

[Airshow]

Personally I think I would choose to jimmy the validator to ignore the fields when hidden but if you want to remove them, it will be easier to put their table rows in a <tbody id="..."></tbody> . That way the fields will be readily identifiable and easier to reinsert.

Airshow

[sunny124]

Thanks guys for helping me out.

I have solved the problem. This is what I did following hielo's advice.

var detached_fields = new Array(); //created array
            $("input[name='online_only_bus']").click(function(){
                if($(this).is(':checked')){
                    var i=0;
                    $('.detach_field').each(function(){
                      //added below line
                       detached_fields.push($(this).remove());
                       i++;
                    });
                        
                }
                else if($(this+':not:checked')){
                  var i= (detached_fields.length) -1;
                  alert(i);
                  while(i > -1) {
                     $(".online_only_bus").after(detached_fields[i]);
                       i--;
                  }
                }
            });

I removed from the input fields the detach_field class, only added the detach_field class to the input field's <tr>
I also added the online_only_bus class to the check box field's <tr>

Its working perfectly now.

Thanks once again for your assistance guys, bye.

[Airshow]

Sunny,

This should be possible without the explicit use of an array. By remembering a jQuery object instead, the code should simplify to:

var $detach_fields = $('.detach_field');
$("input[name='online_only_bus']").click(function(){
  if($(this).is(':checked')){
    $detach_fields.remove();
  }
  else{
    $detach_fields.insertAfter($(".online_only_bus"));
  }
});

(untested)

As far as I know, the elements will reinsert in the same order.

Airshow

[sunny124]

Thanks Airshow, Your method is working as well, and is more simple. Thank you very much.

Sorry for not replying earlier as I had gone interstate, I have just arrived home.

Thanks once again, bye.