写 JS 为去除特定 class 下的第一个 p 元素,浏览器没报错,但无效果

2017-08-09 21:41:24 +08:00
 islujw

HTML 是这样的:

<div class="accordion">
	<div class="spoiler">
		<div class="content">
        		<p></p>
                	<p>正文</p>
		</div>
	</div>
</div>

因为正文外的 div 元素是插件生成的,总是会出现第一个多余的 p 元素,希望在后面加个 js 来去除。

上面的 HTML 段落从 .spoiler 开始的部分共 6 个排比,都在 .accordion 内。我在「正文」的 p 元素标签内加了 id="cleanX",X 是从 1 ~ 6 的数字,按顺序分布在 6 个排比的结构里面。

接着按如下写的 js,浏览器无报错,但没有效果:

<script>
	for (var i=1;i<7;i++) {
		function cleanTag(i) {
    			var x = document.getElementById("clean"+i);
        		var y = x[i];
        		y.parentNode.removeChild(1);
		}
	}
</script>

问题在哪儿?要怎么解决这个问题呢?

3677 次点击
所在节点    JavaScript
29 条回复
stillsilly
2017-08-10 10:06:36 +08:00
……
autoxbc
2017-08-10 10:41:21 +08:00
很多人说楼主定义了 6 次 cleanTag 函数,我的回答也说这样有性能问题
刚测试了一下,这个说法需要修正

循环或者任何语句中的函数声明,并不像函数表达式一样被实际执行,即函数声明不参与流程控制。
函数表达式作为语句,参与流程控制,有性能开销;函数声明完全没有,哪怕其在一个循环中,使其形式上类似重复多次。或者在一个根本不会执行的流程分支中。

看这个代码

console.log( fun.toString() )
if(0)
{
function fun(){return 1}
}

// function fun(){return 1}

函数声明的实际流程是,在代码预解析时(词法分析,语法分析,AST 生成),由引擎将函数声明抽出,放入对应的作用域;在程序执行时,声明语句会被完全略过。

进一步猜测,只要作用域关系正确,函数声明可以写在代码的任何位置,而不产生副作用。
daisyxdx
2017-08-10 10:52:48 +08:00
好瞎的代码。。。
winglight2016
2017-08-10 11:17:40 +08:00
你的标签只有定义 class,寻找的时候又是 byId,这能找到正确的 tag 吗?
islujw
2017-08-10 18:38:25 +08:00
第一次接触 js,谢谢大家的提醒。确实是一个比较低级的错误。
islujw
2017-08-10 18:39:38 +08:00
@winglight2016 我已经写了:在「正文」的 p 元素标签内加了 id="cleanX"。
islujw
2017-08-10 18:58:25 +08:00
@autoxbc 谢谢,非常详细。函数位置的问题是个疏忽,放在循环外面,逻辑上更好。主要是内部的方法,感谢指点。
mingyun
2017-08-12 10:24:25 +08:00
12 楼厉害了
flowfire
2017-08-28 11:53:30 +08:00
removeChild 使用方法
dom.parentNode.removeChild(dom)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/381783

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX