如何找到一个HTML元素然后删除它?

时间:2011-05-24 10:57:19

标签: javascript jquery

  

可能重复:
  Facing weird problem while adding and removing class.

假设我有以下 html -

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

我要做的是,检查是否存在类ui-icon ui-icon-minusthick的跨度,如果存在则先删除它然后添加它。我尝试了以下方式,但它无法正常工作

javascript function ::

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('<span class="ui-icon ui-icon-minusthick"></span>')
            .find(component);
                   }

我以这种方式调用这个函数..

$('.div_portlet').initPortlet('.div_portlet','.div_header','.div_content')

首先应该删除跨度然后添加它,但是如果我多次调用此函数,那么它只是继续添加该跨度。
我怎么能这样做或有更好的方法来做到这一点。 感谢!!!!

2 个答案:

答案 0 :(得分:3)

您正在div_header之外添加跨度。您的.end()表示您不再使用标题过滤器,因此跨度将添加到您的ui_widget的开头......

http://jsfiddle.net/Qjrcg/是你代码的小提琴。如果你看起来我在前置之后有一个注释掉的.end()。如果您取消注释并注释掉之前的那个,那么跨度(我将测试文本放入以便于查看)只会创建一次。

希望这会让你感到厌烦。

答案 1 :(得分:1)

我认为问题出在你的第一次发现

this.find(header).find('span.ui-icon').remove();

您正试图在标题内找到图标,但是您正在将下一个图标添加到portlet(这个)

.prepend('<span class="ui-icon ui-icon-minusthick"></span>')

所以试试这个

this.find('span.ui-icon').remove();

查看我对Chris的小提琴所做的更新:http://jsfiddle.net/Qjrcg/5/

HTH