Question

我有以下html -

<a>
  <b>
   ....

    .....
    <input type="button" name="add" onclick="..." value="add another"/>
    </d>
   </b>
....
</a>

我使用以下js片段 -

/**
 *  Dynamically add a remove button on next to the add button.
 *
 */
addRemoveButton = function(node) {
    if(node.nodeType == 3) {
        if(node.nodeName == "input") {
            if(node.getAttribute("type") == "button") {
                if(node.getAttribute("name") == "add") {
                    var removeButton = node.cloneNode(true);
                    removeButton.removeAttribute("name");
                    removeButton.setAttribute("value", "remove");
                    removeButton.setAttribute("onclick", "");
                    removeButton.setAttribute("id", "");
                    (node.parentNode).appendChild(removeButton);
                    return;
                }
            }
        }
    }
    if(node.nodeType == 1) {
        var list = node.childNodes;
        var i = 0;
        while(i<list.length) {
            return addRemoveButton(list[i]);
            i++;
        }
    }
    return;
}

现在我想在上面列表中显示的当前按钮旁边添加一个类型按钮输入（删除按钮）。我试图递归地做这件事。但这不起作用。你能在上面的代码中找到问题吗？

Answer 1

为什么递归？只是找到现有的按钮？让jQuery担心找到它

$('input[type=button]').after("<input type='button' value='Remove' />");

调整此选项以获取删除按钮以执行所需操作。

Answer 2

据我所知，你的代码相当遥远。您使用了错误的nodeType并且在nodeName上有错误的大小写，并且没有理由使用大量嵌套的if语句。但是，你可以像这样递归地工作：

addRemoveButton = function(node) {
    if (node.nodeType == 1) {
        if (node.nodeName.toLowerCase() == "input" &&
          node.getAttribute("type") == "button" &&
          node.getAttribute("name") == "add") {
            var removeButton = node.cloneNode(true);
            removeButton.removeAttribute("name");
            removeButton.setAttribute("value", "remove");
            removeButton.setAttribute("onclick", "");
            removeButton.setAttribute("id", "");
            (node.parentNode).appendChild(removeButton);
            return;
        } else {
            var list = node.childNodes;
            for (var i=0; i < list.length; i++) {
                // be aware of childNodes changing on us live here
                // when we modify the DOM
                addRemoveButton(list[i]);
            }
        }
    }
}

addRemoveButton(document.body);

您可以在此处查看：http://jsfiddle.net/jfriend00/WCj4b/

使用jQuery（你还标记了你的问题）并继续使用克隆操作，你可以这样做：

$("input[type='button'][name='add']").each(function(index, el) {
    $(this).clone(false)
        .val("remove")
        .removeAttr("name")
        .attr("onclick", "")
        .attr("id", "")
        .insertAfter(this);
});

在这里演示：http://jsfiddle.net/jfriend00/JKsZC/

或者只是插入新HTML而不是克隆现有按钮的更简单的版本：

$("input[type='button'][name='add']").after('<input type="button" value="Remove" />');

在这里演示：http://jsfiddle.net/jfriend00/vSZwp/

递归扫描DOM元素 - Javascript

2 个答案: