A jQuery free function for subforms generated via listOf from DigestiveFunctors

df-list.js

function dfList(el) {
	var listTemplate = el.querySelector('.inputListTemplate');
	var indices = el.querySelector('[name="' + el.id + '.indices"]');
	var counter = el.querySelectorAll(listTemplate.tagName.toLowerCase()  + '.inputListItem').length;

	var matchMinusOne = new RegExp("\-1");
	var matchListTemplate = new RegExp("inputListTemplate");
	var matchNumber = new RegExp("[0-9]", "g");

	el.addEventListener("click", manageCodes, false);

	function manageCodes(ev) {
		if (ev.target.name == 'add') {
			var clone = listTemplate.cloneNode(true);
			clone.className = clone.className.replace(matchListTemplate, 'inputListItem');
			clone.id = clone.id.replace(matchMinusOne, counter);
			clone.style.display = '';
			clone.disabled = false;

			var f = clone.querySelectorAll('input, select, textarea, button, label');
			for (var i = 0, len = f.length; i < len; i++) {
				f[i].id = f[i].id.replace(matchMinusOne, counter);
				f[i].className = f[i].className.replace(matchListTemplate, 'inputListItem');
				f[i].style.display = '';

				if (f[i].tagName.toLowerCase() == 'label') {
					f[i].setAttribute('for', f[i].getAttribute('for').replace(matchMinusOne, counter));
				} else {
					f[i].disabled = false;
					f[i].name = f[i].name.replace(matchMinusOne, counter);
				}
			}
			listTemplate.parentNode.appendChild(clone);
			indices.value = (indices.value.length == 0 ? '' : indices.value + ',') + counter;
			counter++;
		} else if (ev.target.name == 'remove') {
			// TODO: remove assumption that the button is a child of the element being removed
			var rem = listTemplate.parentNode.removeChild(ev.target.parentNode);
			var oldCounter = rem.id.match(matchNumber)[0];
			var regex = new RegExp("(^|,)" + oldCounter + "(,|$)");
			indices.value = indices.value.replace(regex, '');
		}
	}
}

var lists = document.querySelectorAll('.inputList');
dfList(lists[0]);

digestive-heist.hs

dfInputList :: MonadIO m => View Text -> Splice m
dfInputList view = do
    (ref, _) <- getRefAttributes Nothing
    let listRef = absoluteRef ref view
        listAttrs =
            [ ("id", listRef)
            , ("class", "inputList")
            ]
        addControl _ = return
            [ ("onclick", T.concat [ "addInputListItem(this, '"
                                   , listRef
                                   , "'); return false;"] ) ]
        removeControl _ = return
            [ ("onclick", T.concat [ "removeInputListItem(this, '"
                                   , listRef
                                   , "'); return false;"] ) ]
        itemAttrs v _ = return
            [ ("id", T.concat [listRef, ".", last $ "0" : viewContext v])
            , ("class", T.append listRef " inputListItem")
            ]
        templateAttrs v _ = return
            [ ("id", T.concat [listRef, ".", last $ "-1" : viewContext v])
            , ("class", T.append listRef " inputListTemplate")
            , ("style", "display: none;")
            , ("disabled", "disabled")
            ]
        items = listSubViews ref view
        f attrs v = localHS (bindAttributeSplices [("itemAttrs", attrs v)] .
                       bindDigestiveSplices v) runChildren
        dfListItem = do
            template <- f templateAttrs (makeListSubView ref (-1) view)
            res <- mapSplices (f itemAttrs) items
            return $ template ++ res
        attrSplices = [ ("addControl", addControl)
                      , ("removeControl", removeControl)
                      ]
    nodes <- localHS (bindSplices [("dfListItem", dfListItem)] .
                      bindAttributeSplices attrSplices) runChildren
    let indices = [X.Element "input"
                    [ ("type", "hidden")
                    , ("name", T.intercalate "." [listRef, indicesRef])
                    , ("value", T.intercalate "," $ map
                        (last . ("0":) . viewContext) items)
                    ] []
                  ]
    return [X.Element "div" listAttrs (indices ++ nodes)]