jQuery：元素不会被删除

-2

我正在寻找一个搜索功能，并希望在四个选项卡（选项卡窗格）中的每一个中显示信息“无搜索结果”。相反，“无搜索结果”消息会多次显示。每次创建之前我都会删除div。见Fiddle。jQuery：元素不会被删除

的HTML结构是这样的：

<div class="tab-content"> 
<div class="tab-pane active" id="Incoming"> 

    <div class="accordion" id="accordionIncoming"> </div> 
</div> 
<div class="tab-pane" id="Escalation"> 
    <div class="accordion" id="accordionEscalation"> </div> 
</div> 
<div class="tab-pane" id="Outgoing"> 
    <div class="accordion" id="accordionOutgoing"> </div> 
</div> 
<div class="tab-pane" id="Manual-tasks"> 
    <div class="accordion" id="accordionManual-tasks"> </div> 
</div> 
</div>

相应的JavaScript是这样的：

... 
else if (searchTerm !== "" && countNoResults === 0 && v.indexOf(searchTerm) === -1){ 
      $('#well-exists').remove(); 
      $('.tab-pane').append('<div class="well well-small" id="well-exists">No search results.</div>'); 

     }

更新：我解决它通过使用显示/隐藏代替。的HTML添加标签内容：

<div class="tab-content"> 
<div class="well well-small" id="well-exists" style="display:none;">No search results.  </div>

和JavaScript：

$.each(cachedText, function (i, v) { 
     if (searchTerm.length > 0 && v.indexOf(searchTerm) !== -1) { 

      $infoPanels.eq(i).show().parentsUntil('.accordion').addClass("in").show(); 
      $('.accordion-body').addClass("in").css('height', 'auto'); 
      countNoResults++; 

      if (v.indexOf(searchTerm) !== -1) { 
      $('#well-exists').hide(); 
      } 
     } 
     else if (searchTerm !== "" && countNoResults === 0 && v.indexOf(searchTerm) === -1){ 
      console.log("show"); 
      $('#well-exists').show(); 


     }   
    });

来源

2013-08-22 Blitz

直接在您的问题中提供所有相关的详细信息。 –

您正在使用append，每次有人输入一个字符时都会添加一个新的div。更好的方法是显示/隐藏“无搜索结果”。 div的基础上的结果。 – Fuzzley

+1 @Fuzzley，或者只让div为空并设置其文本。 – PlantTheIdea

您所看到的消息多次，因为你必须与类“选项卡窗格”多重元素，因为您正在为cachedText中的每个条目添加一次“无搜索结果”div。

来源

2013-08-22 20:56:46

感谢您关注此事。所以，我为每个窗格使用它们的原因是我希望它们显示在每个选项卡中。每次我创建一个新的div时，我都会删除div。 – Blitz

你最终有好几个元素的ID为well-exists，但jQuery选择器$（'＃well-exists'）只返回一个，因此只有它发现的第一个被删除。 –

很高兴知道。我按照上面的评论中的建议使用show/hide来解决它。再次感谢你。 – Blitz

jQuery：元素不会被删除

回答

相关问题