Question

为什么这段代码不起作用？它是html中的results.js

function clear() {
    var elem = document.getElementsByTagName("div");
    elem.remove();
}
if (search = "cats") {
    clear();
}

如果人们搜索清楚，它应该删除所有div。 html就是这个 -

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="google-site-verification" content="MHLyrfy29CvaiZP0UXiqotKPpzi75UWP3cc4UyCLFLE" />
        <meta name="Description" content="The new, different search engine of the future. Made nonprofit, Made open. ">
        <title>Alium</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css">
        <link rel="apple-touch-icon" href="googel.png">
        <link rel="icon" type="image/png" href="googel.png">
    </head>
    <body>
<div class="search">
        <!--Alium Logo-->
        <div style="margin: auto; text-align: center;">
        <img src="googel.png" width="100" height="100">
        <h1 style="margin: inherit;">
                <red>A</red><orange>l</orange><yellow>i</yellow><green>u</green><blue>m</blue>
        </h1>
        <h2><red>Different</red> <orange>and</orange> <yellow>new</yellow> <green>and</green> <blue>good.</blue></h2>
        </div>
        <!--Search-->
<form style="text-align: center;">
      <div class="group">      
      <input type="text" autocomplete="false" name="search" id="search" required>
      <span class="highlight"></span>
      <label>Search Alium...</label>
      </div>
</form>
</div>
        <!--Results-->
        <script src="results.js" type="text/javascript" charset="utf-8"></script>
        <!--End-->
        <!--This site is real and made by real people-->
        <!--
        /////////////////////////////////////
        ///////Don't//////////Worry//////////
        ////////////////:)///////////////////
        ////////Be////////////Happy//////////
        /////////////////////////////////////
        /////////////////////////////////////
        -->
    </body>
</html>

＆＃13;

＆＃13; 你知道问题是什么吗？我需要帮助，因为我是html和js的初学者，我正在自学。

Answer 1

要删除javascript中的元素，您需要获取parentNode并在要删除的元素上调用removeChild(element)。

您的明确功能将如下所示：

function clear() {
    var elem = document.getElementsByTagName("div");
    [].forEach.call(elem, function(element){
        element.parentNode.removeChild(element);
    });
}

您的比较也应为search == "cats"，截至目前，您已将cats分配给search变量。

Answer 2

我不确定“搜索”是什么，但我把它作为一个窗口提示。这是一个你可以测试的小提琴：https://jsfiddle.net/gg787hto/1/

总体思路：

function clear() {
    var elem = document.getElementsByTagName("div");
    var elements = Array.prototype.slice.call(elem);
    elements.forEach((element) => element.parentNode.removeChild(element));
}

var search = window.prompt("Enter your search");


if (search == "cats") {
    clear();
}

Answer 3

在html（甚至是你的html）中为5个样本div尝试这个：而不是getElementsByTagName（“div”），使用querySelectorAll（“div”）。在chrome上，getElementsByTagName（“div”）解决方案甚至不起作用。迭代返回的实时集合通常不是一个好主意 getElementsByTagName（），从性能的角度来看也是如此。此外，由于从实时集合中删除，因此集合会不断变化，从而导致错误的结果。因此querySelectorAll（）来拯救并给出正确的结果。

此外，您可能需要更正显示if (search = "cats") {的代码，因为这看起来像==的尝试，但您写了=。

function clear() {
  var elems = document.querySelectorAll("div");

  for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    elem.parentNode.removeChild(elem);
  }
}
if (search = "cats") {
clear();
 }

//下面的HTML标记：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

不使用javascript删除div

3 个答案: