Question

I had some help and some suggestions on how to remove a class name.

Previous answer

These worked in fiddle but my application is just a bit different. I have the following:

<span id="refType_1" class="refType indent_02">Link Header</span>

My javascript looks like this:

if (action == "Edit") {
   var parent = linkObj.closest("tr");
   parent.find(".refType").html($("#Type :selected").text());  // 1
   parent.find(".refType").className.replace(/indent_\d+($|\s)/, "xxx"); 
   parent.find(".refType").trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " "));

I tried the last two ways of replacing the class name with “” but both give me an error. For example the last method gives the following:

SCRIPT438: Object doesn't support property or method 'trim'

I think I’m 99% towards getting it working but would appreciate advice. I tried a few different ways so far and it still does not work.

Please note the line with comment // 1 does work. I can change the contents of the span as needed. What does not work is:

parent.find(".refType").className.replace(/indent_\d+($|\s)/, "xxx");   or
parent.find(".refType").trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " "));

These are my two different attempts to get the text indent_xx to be removed from the span.

Answer 1

You did not implement the code from the previous answer correctly.

You cannot do either of these because .className is a property of a DOM object, not of a jQuery object and you aren’t even assigning the result of the .replace() to anything:

parent.find(".refType").className.replace(/indent_\d+($|\s)/, "xxx"); 
parent.find(".refType").trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " "));

If you following the design pattern from the previous answer, you would use this:

parent.find(".refType").each(function() {
    this.className = $.trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " ")); 
}); 

If you know there are no other classes on those objects that you want to keep except the .refType, you can do it even simpler:

parent.find(".refType").attr("class", "refType");

This just sets the entire class name to “refType”, eliminating any other classes that might have been there.

You could also make a jQuery plug-in that you would put somewhere in your initialization code:

$.fn.removeIndentClasses = function() {
    this.each(function() {
        this.className = $.trim(this.className.replace(/(^|\s)indent_\d+($|\s)/, " ")); 
    });
    return this;
}

Then, your code would just be this:

parent.find(".refType").removeIndentClasses();