jqueryinfragisticsignite-ui

JQuery remove() Not Working Properly with Infragistics igCurrencyEditor and igPercentEditor

I have a simple form that allows users to set a dropdown value, set a textbox value, and click a save button. Then the form is reset and the selected options are displayed via bootstrap rows/columns. They can repeat this process as many times as they like and each time they click "Save", a new row is displayed. Each row has a "Delete" button which removes the row from the DOM.

Here is my problem:

I'm using the igCurrencyEditor and igPercentEditor provided by Infragistics. Once I invoke the .igCurrencyEditor() method on my textbox, it adds several extra <div>s and CSS classes to the DOM, which I don't want. So, after initialization of the editors, I call a JavaScript function to remove all the extra elements and CSS classes.

If I call this JavaScript function, then the textboxes look right, but my "Delete" button doesn't work properly. If I don't call the JavaScript function, then my textboxes don't look right, but the "Delete" button works properly.

A full working fiddle can be found here.

Here is a sample of the igCurrencyEditor before my function is called:

<div class="ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default">
    <div class="ui-igeditor-input-container ui-corner-all">
        <input id="TXTAMBCoOp_Amount_22222222-2222-2222-2222-222222222222" type="tel" class="form-control ui-igedit-input" readonly="" role="textbox" aria-label="Currency Editor" style="height: 100%; text-align: right;">
        <input type="hidden" readonly="" name="co_op_vendor_amount_22222222-2222-2222-2222-222222222222" value="0">
    </div>
</div>

And here is a sample of my code that removes the unwanted elements and CSS classes:

// get a reference to the text input and the hidden input so we can move them later
var text_input = $("#" + textbox_id);
var hidden_input = text_input.nextAll("input:hidden");

// get a reference to the infragistics div so we can delete it later
var ig_div_to_delete = text_input.parent().parent();

// get a reference to the span so we know where to insert the input
var span = ig_div_to_delete.nextAll("span");

// move the inputs out of the infragistics div
text_input.insertBefore(span);
hidden_input.insertBefore(span);

// remove infragistics classes
text_input.removeClass();
text_input.addClass("form-control");
text_input.prop("style", "");

// remove the infragistics div
ig_div_to_delete.remove();

Again, there are two possible outcomes:

  1. I call the code above and therefore modify the igCurrencyEditor to look the way I like, but my code doesn't work properly.
  2. I don't call the code above and therefore leave the igCurrencyEditor alone even though I don't like the way it looks, but at least my code works properly.

In case #2, I use the .remove() function to remove an entire <div class="row"> and all of its contents and it works fine.

However, in case #1, I use the same .remove() function to remove the <div class="row">. The <div> is removed, but somehow the child elements of the div are not removed.

Can anyone help me understand why this happens?

EDIT : In my fiddle mentioned above, comment out line #111 and line #120 to see the "Delete" button working properly.

Solution

  • In Short: I'd stick to option #2 and work out the styling.

    Explanation:

    Unfortunately, when dealing with such controls (certainly Ignite UI, but I'm sure with most complex control - jQuery UI widgets and likely other frameworks), removing elements is highly inadvisable as the logic likely relies on that structure to function.

    Those controls handle few use cases and thus render a bit more than a basic input. Then the destroy procedure is very much the opposite of the initial rendering and looking to remove the very elements you already altered and return the original element next to them.

    So as you've already seen, when you change internal control structure you get unexpected behavior. The control DOM is what it is, unless a control is explicitly designed to handle external changes.

    What you can do: