Javascript: Need to remove a single instance of a class on the page when the id is generated

Question

This title may be a little convoluted.... but here it goes.

I have this block of code. In the (I think it's called the parent) span, you can see the id is defined as qa_prdcmpr_qtyspan_0. There are 4 of those on a page (created as 0-3) to compare up to 4 products.

<span id="qa_prdcmpr_qtyspan_0" data-pa-element="compare-qty-column" name="qty-input">
   <br>
   <input class="txtInput" type="text" name="shoppingCartQty_0" id="qa_prdcmpr_qty_0"      maxlength="4" style="border:1px solid;border-color:#000 grey grey #000;width:35px">
   <span width="30px" id="qa_qty_error_1375968996697" class="error">Enter a quantity.</span>
</span>

In the top level span of this block, in the id=qa_prdcmpr_qtyspan_0. The 0 is a generated number (there is 0-3 for product compare)

The long number on the span id is a time stamp to guarantee uniqueness. Instead of writing the page as a generic product container and being able to include x containers on a page, they defined the page with 4 hard coded containers for product comparisons. That being said, I can work with that.

I have tried this:

/* Remove Error Message if applicable */
var $errorElements = $('.error');
$(this).find($errorElements).remove();

I'm in the process of trying this:

var errorNode = $('span[id^="qa_qty_error_"]').attr('id');
while (errorNode.firstChild) {
    errorNode.removeChild(errorNode.firstChild);
}

The problem with the first on is that it is removing all the "error" elements on the page if there are multiple errors. I thought I could get rid of that by using 'this' but I guess not.

Do I have to do something with parent / child nodes to get the correct one?

EDITED for clarity (an attempt)

Answer 1

I ended up finding a pc_prfix which is what is used to generate the 0-3 on the end of the id's. It was a little deceiving as I am of the mind set of descriptive and correct variable names.

$('#qa_prdcmpr_qty_' +pc_prfix).next('span.error').remove();