Рекурсивно сканировать элементы DOM - Javascript

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

Насколько я могу судить, ваш код был довольно далеко. Вы использовали неправильный 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/

Answer 2

Почему рекурсивный?Просто чтобы найти существующую кнопку?Пусть jQuery беспокоится о его поиске

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

Настройте это, чтобы получить кнопку удаления, чтобы сделать то, что вам нужно.