Лучший способ очистить весь контент, кроме определенного элемента, используя jQuery?

Question

Рассмотрим:

<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, как мне сохранить <span>, который имеет input с атрибутом checked? В конце концов, я хочу только следующий 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>

Обратите внимание, что по какой-то причине B для Bar намеренно не заключено в <span> (я не писал HTML). Также предположим, что проверенные входы всегда будут в пределах <span>.

Наконец, мне нужна однострочная команда jQuery без (анонимных) функций, поскольку используемый мной инструмент поддерживает только однострочные операторы jQuery. В конце концов я просто хочу извлечь .text() этого HTML, поэтому я хочу удалить текст, соответствующий ввод которого не проверен.

Ближайшее, что я получил, было что-то вроде $("table").find("p:has(input)").contents().not("span:has(input:not(:checked))").remove().end().html() (не работает)

Answer 1

Обновленный ответ, чтобы попытаться обработать входные данные, которые не заключены в <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, но в идеале он будет согласованным.

Вот обновление jsfiddle .

Answer 2

Одна линия ??Might ? Это может быть невозможно

$(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>