Question

<div id="blah">
    <img src="yadda.svg" />
    <span>
        Text of great importance
    </span>
    Lorem ipsum dolor sit amet
</div>

现在我知道我可以轻松地从所有内容中清除#blah：

for (let node of Array.from(document.getElementById('blah').childNodes))) node.remove()

但是我只想摆脱所有文本（在这种情况下为Lorem ipsum...），我不想摆脱图像，跨度或跨度文本。

Lorem可能是通过div插入到此document.getElementById('blah').appendChild(document.createTextNode('Lorem...'))

Answer 1

此解决方案非常脆弱，我不建议您这样做，但是如果您的html始终是该格式，那么它确实可以工作。

const wrapper = document.querySelector('#blah');

const stripped = Array.from(wrapper.children).reduce((a, c) => a + c.outerHTML, '');

wrapper.innerHTML = stripped;

<div id="blah">
    <img src="yadda.svg" />
    <span>
        Text of great importance
    </span>
    Lorem ipsum dolor sit amet
</div>

Answer 2

您可以使用nextsibling定位文本节点并将其删除。

document.querySelector('#blah > span').nextSibling.remove()

<div id="blah">
    <img src="yadda.svg" />
    <span>
        Text of great importance
    </span>
    Lorem ipsum dolor sit amet
</div>

Answer 3

var btn = document.getElementById('btn');

btn.addEventListener('click', function(e) {
  var blahElem = document.getElementById('blah');
  var content = ''; 
  for(var i=0;i<blahElem.childElementCount;i++){
    content += blahElem.children[i].outerHTML;
  }
  blahElem.innerHTML = content;
});

<div id="blah">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" />
  <span>
        Text of great importance
    </span> Lorem ipsum dolor sit amet
</div>

<br/>
<hr/>
<button id="btn">remove 'Lorem ipsum'</button>

如何从节点删除文本？

3 个答案: