Question

过去，我使用Google Developer Console删除页面上的某些特定div。我当然可以手动执行此操作，但是在某些情况下，div必须使用许多控制台。我只有一个行代码即可完成这项工作（我在搜索互联网时就找到了它），但我丢失了笔记。

那么我该如何使用javascript删除任何html代码（通过复制粘贴代码）。

类似：

elements = $('<div ... </div>');
elements.remove();

OR

$('<div  ... </div>').remove();

有什么想法吗？我不是javascript专家（很明显），并且我一直在搜索stackoverflow数小时，却找不到任何可行的方法。

更新：我认为有些人可能会对我的问题感到困惑。 Google Developer Console接受javascript命令行。因此，即使我要求使用javascript，我也会在Google开发人员控制台上使用该代码。

更新2 ：

这是我需要删除的div的示例。请记住，我想将整个代码复制粘贴到javascript代码中。不是，只是确定div。

<div class="entry-status-overlay" data-entry-status="declined">
            <div class="entry-status-overlay__inner">
                <span class="entry-status-overlay__title">Declined</span>
            </div>
        </div>

是data-entry-status =“ declined”使该div唯一，所以我不能仅使用id选择器或类选择器来标识div。我需要把有趣的东西放在那里，并删除它。

我尝试过：

$('<div class="entry-status-overlay" data-entry-status="declined"><div class="entry-status-overlay__inner"><span class="entry-status-overlay__title">Declined</span></div></div>').remove();

它没有删除div。

Answer 1

您不能仅通过粘贴代码来完成。这将删除所有div元素。

您可能需要特定的选择器，例如id，class或child to specific parent才能从dom中删除元素。

请考虑这种情况，div具有通用类，但数据输入状态不同。因此，您可以使用选择器获取dom，然后检查数据集属性。

对于演示，我将其放在setTimeout中以显示差异。在应用程序中，您可以避免

setTimeout(function() {

  document.querySelectorAll('.entry-status-overlay').forEach(function(item) {
    let getStatus = item.dataset.entryStatus;
    if (getStatus === 'declined') {
      item.remove()
    }
  })
}, 2000)

<div class="entry-status-overlay" data-entry-status="declined">
  <div class="entry-status-overlay__inner">
    <span class="entry-status-overlay__title">Declined</span>
  </div>
</div>

<div class="entry-status-overlay" data-entry-status="accepted">
  <div class="entry-status-overlay__inner">
    <span class="entry-status-overlay__title">accepted</span>
  </div>
</div>

Answer 2

尝试通过其externalHTML搜索dom。

function deleteDomByHtml(html){
    html=html.replace(/\s/g,'');
    $("*").each(function(){
       if(this.outerHTML.replace(/\s/g,'')===html){
           $(this).remove();
       }
    });
}

并在此页面上尝试以下行：

deleteDomByHtml(`<span class="-img _glyph">Stack Overflow</span>`);

Answer 3

只需使用=B1 + C1添加任何属性，它将删除该元素。

[]

$('[class="entry-status-overlay"]').remove();
/*OR*/
$('[data-entry-status="declined"]').remove();

Answer 4

function del(){
   var h =  document.body.outerHTML; 
   h = h.match('<div>...</div>');
   h.length--;
   return h;
}

我想这会起作用，只是尝试一下...我在浏览器控制台上尝试了一下，并且它起作用了，这样您就可以匹配您想要的确切值。

Answer 5

我不妨加我的看法。尝试在控制台中运行它，然后问题消失。

// convert the whole page into string
let thePage = document.body.innerHTML,
string = [].map.call( thePage, function(node){
return node.textContent || node.innerText || "";
}).join("");

// I get some string. in this scenario the Question or you can set one yourself
let replacableCode = document.getElementsByClassName('post-layout')[0].innerHTML,
string2 = [].map.call( replacableCode, function(node){
return node.textContent || node.innerText || "";
}).join("");

// replace whole page with the removed innerHTML string with blank
document.body.innerHTML = thePage.replace(replacableCode,'');

Answer 6

如果要使用该特定数据属性标识div，则可以使用数据属性选择器。在下面的示例中，我使用了一个按钮和click事件来使演示更加直观，但是在控制台中，您唯一需要的行是：

$('div[data-entry-status="declined"]').remove();

$(function() {
  $("#testbutton").click(function() {
    $('div[data-entry-status="declined"]').remove();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-status-overlay" data-entry-status="declined">
            <div class="entry-status-overlay__inner">
                <span class="entry-status-overlay__title">Declined</span>
            </div>
        </div>
        <div id="x">Some other div</div>
        <button type="button" id="testbutton">Click me to test removing the div</button>

有关属性选择器的文档，请参见https://api.jquery.com/category/selectors/attribute-selectors/。

P.S。您将一些原始HTML粘贴到jQuery构造函数中，然后对其执行“删除”的想法行不通-您告诉jQuery根据HTML字符串创建一个对象，就其而言，该对象是一个新的 HTML集。它不会尝试将其与页面上现有的内容进行匹配，即使该确切的HTML位于DOM中的某个位置，也不会引起注意。它会将您刚刚给它的内容视为完全独立。因此，当您在新HTML上运行.remove（）时，该HTML从未添加到页面中，因此无法将其删除。因此.remove（）在这种情况下不起作用。

使用javascript删除任何特定的html代码

6 个答案: