HTML代码

<li id="ioAddOtherRelation"> 
      <a href="" onclick="return ioAddSetOtherRelation()"class="smallLink">add other relation</a> 
</li>

和我想要的功能ioAddSetOtherRelation去除标签的JavaScript去除孩子

JavaScript代码

function ioAddSetOtherRelation(){ 
    var bigLi = document.getElementById('ioAddOtherRelation'); 
    bigLi.removeChild(bigLi.childNodes[0]); 
    return false; 
}

当我按下链接，第一次，什么发生，但当我按两次它删除一个标记，我想删除一个点击标记

来源

2012-05-11 William Kinaan

你有没有试过将子元素设置为变量，然后使用remove（）呢？ – atmd

是的，我试过了，它是一样的 –

与您发布的代码的问题是，你的“礼”元素的第一个孩子实际上是一个textNode，它包含自身和'a'元素之间的换行符和空格。第一次点击时，这个不可见的textNode被删除，第二次点击'a'被删除。

您可以通过删除换行符和空白符号（即将所有HTML放在一行中不含空格）来证明这一点 - 您应该在第一次单击时看到'a'消失。

我发现下面的修改后的JavaScript按照你的意图工作。注意我使用了.getElementsByTagName（）来确保只返回'a'元素。这将返回一个类似.childNodes的数组，所以我正在获取结果数组的第一个元素。

  function ioAddSetOtherRelation() { 
      var bigLi = document.getElementById('ioAddOtherRelation'); 
      bigLi.removeChild(bigLi.getElementsByTagName("a")[0]); 
      return false; 
     }

我发现萤火是在（与console.debug一起（）的JS代码行）解决这一问题是非常有用的 - 如果你还没有使用，我建议你给它一个去！

来源

2012-05-11 08:51:12 Jon

由于昆汀ranganadh指出，将'a'元素本身作为参数传递是比我在上面发布时试图找到它更明智的方法。 – Jon

谢谢你，你让我明白了解决方案，它的工作原理就像你说的，我接受你的答案，谢谢 –

我的荣幸，感谢你接受我的回答，并让我的代表离开现场，最后我可以投票给其他人:-) – Jon

第一次单击时删除了包含元素前面空格的文本节点。您需要确保您传递给removeChild的参数是您实际需要的参数。

这将是一个理智的解决问题的方法：

<li id="ioAddOtherRelation"> 
    <a href="" onclick="return ioAddSetOtherRelation(this)" class="smallLink">add other relation</a> 
</li> 

function ioAddSetOtherRelation(element){ 
    var bigLi = element.parentNode; 
    bigLi.removeChild(element); 
    return false; 
}

摆脱固有的事件属性和写作unobtrusive JavaScript会更好。

来源

2012-05-11 08:34:32 Quentin

是的人，你一个，它的工作原理，非常感谢你，我会接受7分钟后的答案 –

使用jQuery和发送的this

参数以在ioAddSetOtherRelation功能this

检查它here

来源

2012-05-11 08:38:03

总是解决我的问题是使用jQuery :)谢谢 –

的JavaScript去除孩子

HTML代码

JavaScript代码

回答

相关问题