Hola de nuevo:
No, no veo nada más sencillo. De momento he simplificado algunos aspectos. Con
cloneNode() podemos ahorrarnos bastantes líneas. Y no he encontrado otra manera de hacerlo que colocando un botón a cada pareja para dibujar un hijo. Dándole estilos no creo que quede cutre.
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
/*div { border: solid 1px red; }*/
</style>
</head>
<body>
<div>
<div align="center">
<input type="button" value="capitulo" name="capitulo" onclick="crear(this)"/>
</div>
</div>
<div id="modulo" style="display:none">
<input type="text" name="cap" />
<button type="button" name="div" onclick="borrar(this.parentNode)">borrar</button>
<button type="button" name="hijo" onclick="crear(this)">hijo</button>
</div>
<div id="fiel"></div>
<script type="text/javascript">
<!--
function insertAfter(node, referenceNode) {
referenceNode.parentNode.insertBefore(node, referenceNode.nextSibling);
}
var num=0;
function crear(obj) {
num++;
var fi = document.getElementById('fiel'); // 1
var copia = document.getElementById("modulo").cloneNode(true);
copia.style.display = "block";
// obj es el botón
// obj.parentNode es el div que contiene al text+boton
if( obj.value==="hijo" ) {
var anteriorMargin = parseInt(obj.parentNode.style.marginLeft) || 0;
copia.style.marginLeft = (anteriorMargin+2) +"em";
insertAfter(copia, obj.parentNode);
// al pulsar boton 'borrar' del padre que se borren también los hijos
var botonBorrar = obj.parentNode.getElementsByTagName("button")[0];
var anteriorBorrar = botonBorrar.onclick;
botonBorrar.onclick = function() {
anteriorBorrar.call( this );
borrar(copia);
}
}
else {
fi.appendChild(copia); // 7
}
}
function borrar(obj) {
fi = document.getElementById('fiel'); // 1
fi.removeChild(obj); // 10
}
// -->
</script>
</body>
</html>
Quedan aspectos por limar. No he tocado nada de atributos id y name, eso es relativamente fácil. Cuando se borra un padre, se borran todos los hijos, pero eso no pasa si se borra un abuelo (si existe un hijo de hijo de hijo y se le da a 'borrar' en el abuelo el nieto queda sin borrarse).
Creo que es tan complicado y te vas a comer tanto la cabeza que es mejor cambiar el sistema completo y quizás hacerlo con listas, que es lo que semánticamente estamos escribiendo. Con una lista sabríamos qué cuelga de qué con DOM. Con DIVs es más complicado ya que sólo sabemos si cuelga por el estilo CSS que denota el margin.
Yo lo intentaría con listas.