<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>七分地 &#187; 删除元素</title>
	<atom:link href="http://www.qifendi.com/html/ytag/%e5%88%a0%e9%99%a4%e5%85%83%e7%b4%a0/feed" rel="self" type="application/rss+xml" />
	<link>http://www.qifendi.com</link>
	<description>soncy的七分责任田，种点瓜果蔬菜和杂草</description>
	<lastBuildDate>Sun, 22 Aug 2010 13:24:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>javascript删除元素节点</title>
		<link>http://www.qifendi.com/html/y2009/javascript-delete-element-node.html</link>
		<comments>http://www.qifendi.com/html/y2009/javascript-delete-element-node.html#comments</comments>
		<pubDate>Sat, 30 May 2009 06:23:37 +0000</pubDate>
		<dc:creator>soncy</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[removeChild]]></category>
		<category><![CDATA[删除元素]]></category>
		<category><![CDATA[移除节点]]></category>

		<guid isPermaLink="false">http://www.eyike.com/?p=244</guid>
		<description><![CDATA[在javascript操作dom树的时候可能会经常遇到增加，删除节点的事情，比如一个输入框后一个增加按钮，一个删除按钮，点击增加就增加个输入框，点击删除就删除对应的输入框。在一些js框架，如Prototype中，可以用element.remove()来删除一个节点，核心JS中并没有这样的方法，IE中有这样一个方法:removeNode()，尝试运行下面的代码[......]<p class='read-more'><a href='http://www.qifendi.com/html/y2009/javascript-delete-element-node.html'></a></p>]]></description>
			<content:encoded><![CDATA[<p>在javascript操作dom树的时候可能会经常遇到增加，删除节点的事情，比如一个输入框后一个增加按钮，一个删除按钮，点击增加就增加个输入框，点击删除就删除对应的输入框。在一些js框架，如Prototype中，可以用<span class="codeBg">element.remove()</span>来删除一个节点，核心JS中并没有这样的方法，IE中有这样一个方法:<span class="codeBg">removeNode()</span>，尝试运行下面的代码</p>
<div class="runcode">
<p><textarea name="runcode" style="overflow-y:visible;width:600px;font-size:12px" class="runcode_text" id="runcode_Znz_7x">
&lt;div&gt;&lt;input onclick=&quot;removeNode(this)&quot; type=&quot;text&quot; value=&quot;点击移除该输入框&quot; /&gt;&lt;/div&gt;
</textarea></p>
<script type="text/javascript">function changeTsize(){document.getElementById("runcode_Znz_7x").style.height = document.getElementById("runcode_Znz_7x").scrollHeight + "px";}window.setTimeout(changeTsize,0);</script><p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_Znz_7x');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_Znz_7x');"/> <input type="button" value="另存代码" class="runcode_button" onclick="saveCode('runcode_Znz_7x','runcode_Znz_7x');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
<p>可以发现，这个方法在IE下是好使的，但是在Firefox等标准浏览器中就会报错了 <span class="codeBg" style="color: #ff0000;">removeNode is not defined</span>，但是在核心JS中有一个操作DOM节点的方法叫：<span class="codeBg">removeChild()</span>，看名字应该就知道是移除子节点的，那么我们就可以变通一下来实现移除指定的节点了，我们可以先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。我们可以定义一个方法，就叫removeElement吧。</p>

<div class="wp_codebox"><table><tr id="p2441"><td class="code" id="p244code1"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> removeElement<span style="color: #009900;">&#40;</span>_element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
         <span style="color: #003366; font-weight: bold;">var</span> _parentElement <span style="color: #339933;">=</span> _element.<span style="color: #660066;">parentNode</span><span style="color: #339933;">;</span>
         <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>_parentElement<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
                _parentElement.<span style="color: #660066;">removeChild</span><span style="color: #009900;">&#40;</span>_element<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
         <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>尝试运行下面的代码，可以在各种浏览器中正确执行了。</p>
<div class="runcode">
<p><textarea name="runcode" style="overflow-y:visible;width:600px;font-size:12px" class="runcode_text" id="runcode_KhK18f">
&lt;script type=&quot;text/javascript&quot;&gt;
function removeElement(_element){
         var _parentElement = _element.parentNode;
         if(_parentElement){
                _parentElement.removeChild(_element);
         }
}
&lt;/script&gt;
&lt;div&gt;&lt;input onclick=&quot;removeElement(this)&quot; type=&quot;text&quot; value=&quot;点击移除该输入框&quot; /&gt;&lt;/div&gt;
</textarea></p>
<script type="text/javascript">function changeTsize(){document.getElementById("runcode_KhK18f").style.height = document.getElementById("runcode_KhK18f").scrollHeight + "px";}window.setTimeout(changeTsize,0);</script><p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_KhK18f');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_KhK18f');"/> <input type="button" value="另存代码" class="runcode_button" onclick="saveCode('runcode_KhK18f','runcode_KhK18f');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.qifendi.com/html/y2009/javascript-delete-element-node.html/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

