0

html代码

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

我希望函数 ioAddSetOtherRelation 删除 a 标签

javascript代码

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

当我第一次按下链接时，什么都没有发生，但是当我按下它两次时它删除了a标签，我想一键删除a标签

4

3 回答 3

3

第一次单击时，您删除了包含元素前面空格的文本节点。您需要确保传递给的参数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;
}

摆脱固有的事件属性并编写不显眼的 JavaScript会更好。

于 2012-05-11T08:34:32.050 回答
2

您发布的代码的问题是您的“li”元素的第一个子元素实际上是一个 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;
      }

我发现 FireBug 在解决这个问题方面非常有用（连同 JS 代码中的 console.debug() 行）——如果你还没有使用它，我建议你试一试！

于 2012-05-11T08:51:12.167 回答
1

使用 jQuery 并将参数发送为this

把它this放在 ioAddSetOtherRelation 函数中

在这里检查

于 2012-05-11T08:38:03.690 回答