javascript - 使用JS删除元素但填充了剩余空间

Question

作为一种教育经验，我一直在不同的网站上使用 JavaScript。

我想尝试使用 JavaScript 删除整个右侧栏，但也让正文的其余部分填充从删除栏中收到的空间。

但是，我只成功地删除了右边的栏，但页面的其余部分没有填充新的缺失空间。我可以只使用 JavaScript 控制台来做到这一点吗？

网站:https://docs.djangoproject.com/en/1.5/

JS代码:

child = document.getElementById("content-related");
child.parentNode.removeChild(child);

Answer 1

如果您还没有，请熟悉浏览器的开发人员工具(通常您可以使用 F12 键调出它们)。这将允许您在控制台中尝试命令以及查看页面上的元素。

如果您查看层次结构，有一个 id 为 columnwrap 的 div，它包含 content-main 和 content-related。您的命令工作正常并删除了该元素，但是如果您在开发工具中查看 content-main 元素，您会看到它被设置为 70% 宽度，因此它不会回流并占用剩余空间。

您可以通过将宽度设置为 100% 或 auto 来重置 content-main 元素的宽度。

document.getElementById('content-main').style = 'width: 100%';
document.getElementById('content-main').style = 'width: auto';