Question

我的代码非常简单。这是我对jQuery的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>node_jQueryAPI</title>
    <script src="jquery/jquery.js"></script>
</head>

<body>
   <div class="target" id="target1">
       content1
   </div>
   <div class="target" id="target2">
       content2
   </div>

</body>
</html>

我在这段代码中的目的是测试有关jQuery方法remove（）和empty（）;的信息。（删除＃target1并清空＃target2）由

$('#target1').remove();
$('#target2').empty();

这在Chrome的控制台中运行良好。

但是如果我使用JavaScript代码

var targets = document.getElementsByClassName('target');
targets[0].remove(); // This is working well
targets[0].empty(); // This is never working!!!! This is my Question!, Why!?!!??

请帮助我〜!!谢谢

Answer 1

如果要尝试测试jQuery方法remove()和empty()，则需要包装在jQuery中检索到的DOM元素，以便在其上调用jQuery函数。像这样：

var targets = document.getElementsByClassName('target');
$(targets[0]).remove(); //will remove the first element with class `target` from the DOM
$(targets[1]).empty(); //will empty the contents of the second element with class `target` in the DOM (i.e: remove the text `content1`)

请确保您在页面上也包含jQuery脚本。无需在jQuery中包装DOM元素，您就可以调用普通的javascript函数。在javascript中，remove()存在（用于从选择列表中删除选项），而empty()不存在

Answer 2

在纯JavaScript中没有称为empty()的方法。如果您想清空一个元素，有两种方法可以做到。最简单的方法之一就是将元素的内部HTML分配给一个空字符串，如下所示：

document.querySelector("div").innerHTML = "";

<p>The following div is now empty</p>
<div>ABC</div>

但是，您可以创建一个可重用的函数empty()，该函数将接受一个元素并清空其内容，如下所示：

/* JavaScript */

function empty(x) { x.innerHTML = "" }

//You can now empty as many elements as you want using the reusable empty() function created above

var a = document.getElementById("aaa");
var b = document.getElementById("bbb");
var c = document.getElementById("ccc");

empty(a);
empty(b);
empty(c);

<!-- HTML -->

<p>All three divs below are now empty:</p>

<div id="aaa">ABC</div>
<div id="bbb"><p>XYZ</p></div>
<div id="ccc"><div>123</div></div>

为什么empty（）方法在jQuery中不起作用？

2 个答案: