Deatch Append jQuery Returning [object OBJECT]


I’m using the select2 jquery library in a WooCommerce project and trying to conditionally detach and append a div. The reason why I’m not simply using show and hide is because that continues to output some of the meta data to the product. My detaching it or removing it I wanted to avoid having the content of that data output. Here is the code:

jQuery("#wholefilletsceviche").ready(function ($) {
  $("#wholefilletsceviche").on("select2:select", function (e) {
    var saltBaked = "";

    var saltBaked = $(".salt-baked");

    var data =;

    if (data !== "Whole") {
      var saltBaked = $(".salt-baked").detach();
    } else if (data === "Whole") {
      $(".extra-options > tbody").append(saltBaked);

}); //close

I hope it is clear from that code what I’m trying to do, I get the correct output from the console, but here:

$(".extra-options > tbody").append(saltBaked);

I’m getting an the [object OBJECT] error.

There may be a way to do this with the select2 library, I’m not sure at this stage, but I’d like to understand why this isn’t working.

Thanks for the help.


Hi @info2566, you’re declaring the same variable no less than three times inside the same function scope, but the important one is this one:

var saltBaked = $(".salt-baked")

However once you detached() the element, then the next time the function gets called this will be an empty collection; so you have to keep a reference outside of that function:

jQuery('#wholefilletsceviche').ready(function ($) {
  var saltBaked = $('.salt-baked')

  $('#wholefilletsceviche').on('select2:select', function (e) {
    var data =

    if (data !== 'Whole') {
    } else {
      $('.extra-options > tbody').append(saltBaked)

Not sure where this is coming from though… it’s not an error but just the string representation of any object, which you get if you e.g. alert() an object.


Thanks! That fixed it, not sure what I was trying to do there I have no idea why that variable was declared inside the function, that would normally be obvious the rest of the variable declarations were me thinking i had to declare an empty variable to make it work.

I was getting the [OBJECT object] error output because I appended that variable in DIV tags to try understand what was happening.

Thanks so much it all works as expected now.


1 Like

Presumably as text() then? This would explain why you got the string representation… anyway I’d suggest to always use the console for debugging, or better yet, the actual debugger – saves you a lot of trouble. :-)

Yes thanks - I certainly do I have no idea why I was wrapping the variable in divs, I was getting the same error in the console! At least I took that out when I posed the initial question! Thanks so much for helping with that!


1 Like