使用 jquery 删除没有 <dd> 的 <dt>答案

【问题标题】：Delete <dt> without <dd> with jquery使用 jquery 删除没有 <dd> 的 <dt>
【发布时间】：2009-12-24 10:06:55
【问题描述】：

我有一个定义列表，我需要删除所有没有任何<dd> 的<dt> 标签在这种特殊情况下：Herramientas、Suplementos、Repuestos、Herramientas 和 Anti pinchaduras

列表可能因库存而异（任何类别<dt> 都可以为空）

我试过了

$('dt+dt').each(function() {
    $(this).remove();
});

但它删除了“partes”而不是“herramientas”并且未能删除“suplementos” 也尝试使用:empty，但似乎没有 dd 的 dt 不被认为是空的......

一定有一个非常简单易行的解决方案，但我的大脑拒绝看到它:-(

示例列表：

<dl>
    <dt>Bicicletas</dt>
        <dd><a href="/bicicletas/">Bicicletas</a> (70)</dd>
    <dt>Accesorios</dt>
        <dd><a href="/accesorios/bocinas/">Bocinas, timbres y cornetas</a> (9)</dd>
        <dd><a href="/accesorios/transporte/">Transporte y protección</a> (1)</dd>
    <dt>Herramientas</dt>
    <dt>Partes</dt>
        <dd><a href="/partes/cubiertas/">Cubiertas</a> (2)</dd>
        <dd><a href="/partes/asientos/">Asientos</a> (5)</dd>
        <dd><a href="/partes/grips/">Puños / grips</a> (1)</dd>
    <dt>Articulos de indumentaria</dt>
        <dd><a href="/indumentaria/jerseys/">Jerseys / Remeras</a> (1)</dd>
        <dd><a href="/indumentaria/cascos/">Cascos</a> (3)</dd>
    <dt>Suplementos</dt>
    <dt>Repuestos</dt>
    <dt>Herramientas</dt>
    <dt>Anti pinchaduras</dt>
</dl>

【问题讨论】：

标签： jquery html jquery-selectors

【解决方案1】：

$('dt').filter(function(){
                     return !($(this).next().is('dd'));
               }).remove();

在此处查看实际操作：http://jsbin.com/isute

这也可以，但很奇怪，不会选择最后一个<dt>，所以我添加了另一个选择器：

$('dt + dt').prev().add('dt:last-child').remove();

即：选择所有在另一个<dt>之后的<dt>s，选择prev dt，并添加最后一个。

另一种选择：

var good = $('dd').prev('dt');
$('dt').not(good).remove();

not can take an array，所以这行得通。这也可以写成 $('dt').not($('dd').prev('dt')).remove();，但是很丑。

【讨论】：

我应该添加 - 最初我是 $('dt + :not(dd)').prev() ，所以 dt:last-child 更有意义 - 它是最后一个，或者它后面有一些不是 dd 的东西。

【解决方案2】：

试试这样的...

$('dt').each(function() {
    if($(this).next('dd').length == 0){
       $(this.remove();
    }
});

【讨论】：

【解决方案3】：

试试这个：

$('dl>dt').each(function() {
    if ($(this).next("dd").length <= 0){
        $(this).remove();
    }
});

【讨论】：

这会删除所有不包含 dd的dts。也就是说，可能所有这些。 -1
你的第一个选择器是dl>dt - 你从一个空集开始，这里没有层次结构：P。看到我的答案中的链接吗？将/edit 添加到末尾并使用它，您会明白我的意思（即jsbin.com/isute/edit）。

【解决方案4】：

这也适用于隐藏的<dd>：

var $dl = $('dl'); // hook this up to your DL

$dl.find('dt').each(function() {
  var $dt = $(this), $next = $dt.nextAll(':visible').slice(0,1);
  // the next visible element is a dt OR there isn't another visible element.
  if ($next.slice(0,1).is('dt') || $next.length == 0)
  {
    $dt.hide();
  } else {
    $dt.show();
  }
});

【讨论】：