2014-11-22 122 views
1

我对JavaScript很陌生,可能还有其他人已经问过类似的问题,但我希望你能帮助我。 我正在尝试添加/删除div的简单基本操作。 添加工作正常,删除永远不会被调用。在javascript中添加和删除div中的div

function $(el) { 
    return document.getElementById(el); 
} 

function remove() { 
    console.log("remove called"); 
    var child = $('second'); 
} 

function addContainer() { 
    console.log("addContainer called"); 
    var aContainer = document.createElement('div'); 
    aContainer.setAttribute('id', 'second'); 
    aContainer.innerHTML = "<a href=\"#\" onclick=\"remove()\">second</a>"; 
    document.body.appendChild(aContainer); 
} 

在addContainer中我尝试添加onclick函数回调,但显然它不起作用。

这里参考的jsfiddle http://jsfiddle.net/m8kyav2b/

你知道为什么 1- remove函数不会被调用? 2-一旦我点击删除链接,innerHTML被删除,但不是div“秒”?

感谢很多提前

+0

'$( '第二个')'是一个jQuery选择没有jQuery是目前 – 2014-11-22 03:21:14

+0

@Xero - 它不是一个jQuery选择 – 2014-11-22 03:22:22

+0

我在定义的函数$(EL)。我在其他脚本中使用了相同的功能,从来没有遇到过问题,定义有没有问题? 编辑:@Xero:别担心:) – CKY 2014-11-22 03:24:45

回答

3

试试这个样子,这将工作:

DEMO

function $(el) { 
    return document.getElementById(el); 
} 

function removeit() { 
    alert("remove called"); 
    var child = $('second'); 
    child.remove(); 


} 

function addContainer() { 
    console.log("addContainer called"); 
    var aContainer = document.createElement('div'); 
    aContainer.setAttribute('id', 'second'); 
    aContainer.innerHTML = "<a href=\"#\" onclick=\"removeit()\">second</a>"; 
    document.body.appendChild(aContainer); 
} 

旁注:

调用remove()作为你的函数不会因为它是一个原生的JavaScript功能。 您实际上并没有删除函数中的div!

+0

嗯,我注意到一个点亮如果你点击“秒”,它会消失,然后你点击“移动”,它会再次出现,但是你不能再次隐藏它。 – 2014-11-22 03:30:21

+0

@Xero你尝试过吗? http://jsfiddle.net/m8kyav2b/5/每次都为我工作 – baao 2014-11-22 03:31:43

+0

呵呵,你的回答指向错误小提琴然后,:P – 2014-11-22 03:32:58

0

remove不会被调用,因为remove<a>标签指的是本机的功能remove(具体而言,HTMLAnchorElement.prototype.remove/ChildNode.remove),而不是你的。这就是为什么只有文字被删除,因为ChildNode.remove的目标是其子女。

要引用您的功能,请

<a href="#" onclick="window.remove();"></a> 

甚至更​​好:

var aContainer = document.createElement('div'), 
    anchor = document.createElement("a"); 
aContainer.setAttribute('id', 'second'); 
a.innerText = "second"; 
a.addEventListener("click", remove); 
aContainer.appendChild(a); 
document.body.appendChild(aContainer); 
+0

感谢提示:) – CKY 2014-11-22 03:32:45

0

这里是一个有用的链接:Remove element by id。就在下面的代码进行测试和工程(它会在鼠标移到删除HTML标签,所以基本上只是改变周围的一点点的语法把它删除什么都标记你想要的。

<p id="el" onmouseover="remove()">test</p> <!--we are deleting with JavaScript this HTML <p> tag. --> 

function remove() { 
    var element = document.getElementById("el"); /* finding and assigning element to variable element */ 
    document 
    element.parentNode.removeChild(el); // then deleting the parent and child (please refer to link) 
} 

为其余。你的问题看这里:add onclick event to newly added element in javascript