javascript - 从 HTML 节点获取不带文本的 html 结构

Question

我想删除所有文本，只获取节点的 html 结构作为字符串。

这是我的节点，

<div class='myparent'>
        <div>
            <div class="pdp-product-price test" id="lll">
                <span> 650 rupees</span>
                <div class="origin-block">
                    <span> 1,500 rupees</span>
                    <span>-57%</span>
                </div>
            </div>
        </div>
    </div>

我想要的是这样的，

<div class='myparent'>
    <div>
        <div class="pdp-product-price test" id="lll">
            <span></span>
            <div class="origin-block">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</div>

我试过了，

$('.myparent').children().empty(); 

和

$('.myparent').children().text('');

但不幸的是他们删除了所有 child 。

Answer 1

您可以get all text nodes然后 .remove() 其中每个:

function nativeTreeWalker(parent) {
  var walker = document.createTreeWalker(
    parent,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  var node;
  var textNodes = [];

  while (node = walker.nextNode()) {
    textNodes.push(node);
  }
  return textNodes;
}

const parent = document.querySelector('.myparent');
nativeTreeWalker(parent).forEach(node => node.remove());
console.log(parent.outerHTML);

<div class='myparent'>
  <div>
    <div class="pdp-product-price test" id="lll">
      <span> 650 rupees</span>
      <div class="origin-block">
        <span> 1,500 rupees</span>
        <span>-57%</span>
      </div>
    </div>
  </div>
</div>

如果您不想弄乱现有的 HTML，请先克隆父级。

function nativeTreeWalker(parent) {
  var walker = document.createTreeWalker(
    parent,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  var node;
  var textNodes = [];

  while (node = walker.nextNode()) {
    textNodes.push(node);
  }
  return textNodes;
}

const parent = document.querySelector('.myparent').cloneNode(true);
nativeTreeWalker(parent).forEach(node => node.remove());
console.log(parent.outerHTML);

<div class='myparent'>
  <div>
    <div class="pdp-product-price test" id="lll">
      <span> 650 rupees</span>
      <div class="origin-block">
        <span> 1,500 rupees</span>
        <span>-57%</span>
      </div>
    </div>
  </div>
</div>