how to find a html element and then remove it?
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/6095815/facing-weird-problem-while-adding-and-removing-class">Facing weird problem while adding and removing class.</a>  </p>
</blockquote>



<p>Suppose I have the following <strong>html</strong>--  </p>

<pre><code>     &lt;div class="div_portlet ui-widget ui-widget-content ui-corner-all defaultcontentbg portlet-width default_border default_border_color portlet_space"&gt;
     &lt;div class="div_header headertitle align_center defaultheadercolor portlet-header-left-padding default_bottom_border default_border_color"&gt;
     &lt;span class="ui-icon ui-icon-minusthick"&gt;&lt;/span&gt;
      Order Header Level Information&lt;/div&gt;
      &lt;div id="ordrHdrLvnInfn" class="div_content portlet-width"&gt;
</code></pre>

<p>What I am trying to do is, check whether span with class <code>ui-icon ui-icon-minusthick</code> exists or not, if it exists first remove it and then add it. I tried in following way, but it's not working</p>

<p><strong>javascript function::</strong></p>

<pre><code>jQuery.fn.initPortlet = function( parent_component ,header , component ){
        this.find(header).find('span.ui-icon').remove();

        this.addClass("ui-widget ui-widget-content ui-corner-all")
            .find(header)           
            .addClass("headertitle")
            .addClass("align_center")
            .addClass("defaultheadercolor")
            .end()
            .prepend('&lt;span class="ui-icon ui-icon-minusthick"&gt;&lt;/span&gt;')
            .find(component);
                   }
</code></pre>

<p>and I am calling this function in this way..  </p>

<pre><code>$('.div_portlet').initPortlet('.div_portlet','.div_header','.div_content')
</code></pre>

<p>It should first remove the span then add it, but if I am calling this function multiple times then it just keep on adding that span.<br>
How can I do this or is there any better way to do this.
Thanks!!!!</p>
