时间戳

首页 > 解决方案 > 忽略 JavaScript 副本上的子元素

javascript - 忽略 JavaScript 副本上的子元素

问题描述

我有以下 HTML：

<li class="checked"><p>This<em>I don't need this</em></p>
<input type="checkbox"></li>
<li class="unchecked"><p>That</p>
<input type="checkbox"></li>
<button onclick="copyText()">Copy</button>
<div id="output"></div>

以及以下 Javascript，它复制checked剪贴板中类的所有元素：

function copyText(){
  var outputText = "";
  var items= document.getElementsByClassName('unchecked');
  for(var i = 0; i < items.length; i++) {
    outputText += items[i].innerText+"\n";
  }
  var output = document.getElementById('output');
  output.innerText = outputText;
  var range = document.createRange();
  range.selectNodeContents(output);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  output.style.display = 'none';
}

完美地工作，直到它还包括<em>我不想要的。我试图从内部排除所有子元素，checked但这根本没有做任何事情......我无法更改的类，<em>因为我正在使用 Jekyll markdown 并且它添加了无类（我想要不要对我的输入文件使用内联属性）。

标签： javascript

解决方案

更新循环以包含 if 语句：

var em = document.querySelector('em'); 
for(var i = 0; i < items.length; i++) {
    if (em,items[i].contains(em)){
        outputText += items[i].innerText.replace(em.innerText, "")+"\n";
        console.log(em.innerText);
    }else{
        outputText += items[i].innerText+"\n";
    }
}

推荐阅读