Question

I want to remove x_ from every id and every class in a ol. This ol is generated from a form field so I can’t get access to it.

if I save the field value in a variable, how can i remove these characters?

Here’s some of my jQuery

var itemValue = $("#ItemDescription").val();
console.log(itemValue);
$("body #demo ol.sortable").html(itemValue);

HTML
content of (#itemDescription)

<li class="x_menu-item">
<div>Menu Item</div>
<ol>
    <li style="display: list-item;" class="x_no-nest" id="x_menu-item0">
    <div><a href="/_webapp_3915457/Portfolio1">Portfolio1</a></div>
    </li>
    <li style="display: list-item;" class="x_no-nest" id="x_menu-item1">
    <div><a href="/_webapp_3915468/Portfolio10">Portfolio10</a></div>
    </li>
    <li style="display: list-item;" class="x_menu-item">
    <div>Menu Item</div>
    <ol>
        <li style="display: list-item;" class="x_no-nest" id="x_menu-item3">
        <div><a href="/_webapp_3923732/Portfolio12">Portfolio12</a></div>
        </li>
    </ol>
    </li>
    <li style="display: list-item;" class="x_no-nest" id="x_menu-item2">
    <div><a href="/_webapp_3923731/Portfolio11">Portfolio11</a></div>
    </li>
</ol>
</li>
<li style="display: list-item;" class="x_no-nest" id="x_menu-item4">
<div><a href="/_webapp_3914327/Portfolio2">Portfolio2</a></div>
</li>
<li style="display: list-item;" class="x_no-nest" id="x_menu-item5">
<div><a href="/_webapp_3915633/Portfolio3">Portfolio3</a></div>
</li>
<li style="display: list-item;" class="x_no-nest" id="x_menu-item6">
<div><a href="/_webapp_3915649/Portfolio4">Portfolio4</a></div>
<ol>
</ol>
</li>
<li style="display: list-item;" class="x_no-nest" id="x_menu-item7">
<div><a href="/_webapp_3915635/Portfolio5">Portfolio5</a></div>
</li>
<li class="x_no-nest" id="x_menu-item8">
<div><a href="/_webapp_3915658/Portfolio6">Portfolio6</a></div>
</li>
<li class="x_no-nest" id="x_menu-item9">
<div><a href="/_webapp_3915650/Portfolio7">Portfolio7</a></div>
</li>
<li class="x_no-nest" id="x_menu-item10">
<div><a href="/_webapp_3915354/Portfolio8">Portfolio8</a></div>
</li>
<li class="x_no-nest" id="x_menu-item11">
<div><a href="/_webapp_3915356/Portfolio9">Portfolio9</a></div>
</li>

I also want to replace it into the textarea value when I’m done but I can do that myself. I just need help with the removal of “x_”

Thanks!! 🙂

Answer 1

You can remove all the “x_” from the ID’s with simply using the callback function of attr:

$("#ItemDescription li").attr('id',function(i,e){
   if (typeof e != "undefined" && e.substring(0,2)=="x_") return e.substring(2);
});

example: http://jsfiddle.net/niklasvh/Rfq2n/

If you only have 1 class attached per element, like in your example, you can do the same with the classes:

$("#ItemDescription li").attr('id',function(i,e){
   if (typeof e != "undefined" && e.substring(0,2)=="x_") return e.substring(2);
}).attr('class',function(i,e){
   if (typeof e != "undefined" && e.substring(0,2)=="x_") return e.substring(2);
});

example: http://jsfiddle.net/niklasvh/Rfq2n/6/

In case there may be multiple classes, and the “x_” class isn’t the first one, you could do this:

$("#ItemDescription li").attr('id',function(i,e){
   if (typeof e != "undefined" && e.substring(0,2)=="x_") return e.substring(2);
}).attr('class',function(i,e){
    if (typeof e != "undefined"){
        if (e.split(" ").length && e.substring(0,2)=="x_")  return e.substring(2);
        var classes = "";
        $.each(e.split(" "),function(i,b){
            if (b.substring(0,2)=="x_") classes +=  " "+b.substring(2);
            else   classes +=  " "+b;
        });  
        return $.trim(classes);
    }
});

example: http://jsfiddle.net/niklasvh/Rfq2n/16/

In that case, use the solution mentioned in the comment below by steve.