使用jQuery清空除特定元素以外的所有内容的最佳方法？

Posted 2023-05-09

【中文标题】使用jQuery清空除特定元素以外的所有内容的最佳方法？

【英文标题】：Best way to empty all content except a particular element using jQuery?

【发布时间】：2019-10-21 09:55:18

【问题描述】：

考虑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked">1 </span>
          <span><input type="checkbox" disabled="disabled"> 2</span>
          <span><input type="checkbox" disabled="disabled"> 3</span>
        </p>
      </td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked"> A</span>
          <input type="checkbox" disabled="disabled"> B
        </p>
      </td>
  </tbody>
</table>

使用 jQuery，我如何只保留具有 input 和属性 checked 的 <span>？基本上，最后，我只想要以下 html：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked">1 </span>
        </p>
      </td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked"> A</span>
        </p>
      </td>
  </tbody>
</table>

请注意，出于某种原因，Bar 的 B 故意不环绕 <span>（我没有编写 HTML）。此外，假设检查的输入将始终在<span> 内。

最后，我需要一个没有（匿名）函数的单行 jQuery 命令，因为我使用的工具只支持单行 jQuery 语句。我最终只想提取此 HTML 的.text()，因此我想删除未检查相应输入的文本。

我得到的最接近的是 $("table").find("p:has(input)").contents().not("span:has(input:not(:checked))").remove().end().html()（不起作用）

【参考方案1】：

一条线？？ ? ? 那可能是不可能的

$(document).ready(function()

  $("table tr td p").each(function()
  
    var html = "";
    $(this).find('span').each(function()
      if($(this).has('input[checked="checked"]').length)
        html += '<span>'+$(this).html()+'</span>';
      
    );
    $(this).html(html);
    
  );

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked">1 </span>
          <span><input type="checkbox" disabled="disabled"> 2</span>
          <span><input type="checkbox" disabled="disabled"> 3</span>
        </p>
      </td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>
        <p>
          <span><input type="checkbox" disabled="disabled" checked="checked"> A</span>
          <input type="checkbox" disabled="disabled"> B
        </p>
      </td>
  </tbody>
</table>

【讨论】：

抱歉，源 HTML 没有 <span> 和 B。这是故意的。这就是为什么逻辑必须是“清空 p 的所有内容，除了具有检查输入的跨度之外”。

但是，我认为他想要文本节点。在他的样本（期望）中，它有那些。 @Rory McCrossan

如果您对 one Line 没有问题，它会起作用 ? ? #hobbes3

【参考方案2】：

尝试处理未包含在 <span> 中的输入的更新答案。

// Finds all checked input
var $targets = $('body').find('input:checked');

// Loop over each input
$($targets).each(function()

    // If the parent isn't a span, then false
    var parent_span = ($(this).parent().is('span')) ? $(this).parent() : false;

    // If parent span is not false, empty the closest p and append the span, otherwise remove spans from parent p
    (parent_span !== false) ? $(this).closest('p').empty().append(parent_span) : $(this).closest('p').find('span').remove();

)

如果您将另一个未包装在 <span> 中的输入添加到容器中，这将分崩离析。我知道你说过 HTML 是这样的，但理想情况下它应该是一致的。

Here's an update jsfiddle.