Problemas con this al clonar un objeto

[Italico76]

Buenas!

Estoy clonando una parte de un formulario que conciste en algo asi:

Código Javascript:

<div id="cloname">
                <select name="return[]" style="width:73px;">
                    <option value="NULL">NULL</option>  
                    <option value="boolean">boolean</option>
                    <option value="number">number</option>
                    <option value="resource">resource</option>
                    <option value="string">string</option>  
                    <option value="array">array</option>
                    <option value="object">object</option>  
                    <option value="mixed">mixed*</option>
                </select>
                <a href="javascript:delete_me(this.id);" title="delete it">[x]</a>
            </div>
 

Como puede observarse hay un enlace que envia una referencia supuestamente al mismo elemento <a> pero se pierde la referencia con la clonacion y queda en "undefined"

Se me ocurren parches... pero alguien me puede explicar como recuperar la referencia ?


La necesito para poder borrar esa fila mas adelante asi:

Código Javascript:

function delete_me(elem)
    {
        console.log(elem); // undefined
        var hijo = document.getElementById("clon_"+cont_clones);
        var padre = hijo.parentElement;
        padre.removeChild(hijo);
    }
 

Gracias por su tiempo!

[Alexis88]

¿Te has dado cuenta de que intentas pasar el id del enlace pero este no tiene uno?

Saludos

[Italico76]

Iniciado por Alexis88

¿Te has dado cuenta de que intentas pasar el id del enlace pero este no tiene uno?

Si lo tiene... que pena no haber posteado la funcion que se lo coloca

Ahi mismo aplique un "parche" de lo mas asqueroso..... hardcodeo el href por el problema de que this no hace referencia a lo que imagino y el motivo de la consulta:

Código Javascript:

function add_param()
    {
        returns = document.getElementsByName("return");
        
        if (returns.length<15)
        {   
            var div = document.getElementById("cloname");
            var insert_pt = document.getElementById("add_after");
        
            cont_clones++;
        
            newNode=div.cloneNode(true); // appendChild(document.createElement("br"))
            newNode.firstElementChild.parentElement.id = 'clon_'+cont_clones;
            newNode.firstElementChild.nextElementSibling.id='remove_clon_'+cont_clones;  // enlace
 
            // PARCHE ASQUEROSO: //////////       
            newNode.firstElementChild.nextElementSibling.href="javascript:delete_me("+'remove_clon_'+cont_clones+");";
            
            insertAfter(insert_pt,newNode);             
        
            document.getElementById("min_param").value = returns.length+1;
            coherencia_params();
            
            
        }
    }
 

Al examinar el DOM generado y eso SIN APLICAR EL PARCHE DEL "HREF" ..... *si* se ven los IDs de los <A>, copio y pego desde la consola:

Código HTML:

<div id="clon_5">
                <select name="return[]" style="width:73px;">
                    <option value="NULL">NULL</option>  
                    <option value="boolean">boolean</option>
                    <option value="number">number</option>
                    <option value="resource">resource</option>
                    <option value="string">string</option>  
                    <option value="array">array</option>
                    <option value="object">object</option>  
                    <option value="mixed">mixed*</option>
                </select>
                <a href="javascript:delete_me(remove_clon_5);" class="no_decorar" title="delete it" id="remove_clon_5">[x]</a>
            </div>
 

El problema realmente es "conceptual" y tiene que ver con la definicio de THIS en este lenguaje tan "raro" para un "PHP guy"

[Alexis88]

Solo por probar, podrías cambiar esta línea:

Código Javascript:

newNode.firstElementChild.nextElementSibling.href="javascript:delete_me("+'remove_clon_'+cont_clones+");";
 

Por esto:

Código Javascript:

newNode.firstElementChild.nextElementSibling.addEventListener("click", function(){
    delete_me("remove_clon_" + cont_clones);
}, false);
 

Es lo más adecuado, ya no se recomienda referenciar a funciones JS desde el atributo href de un enlace, aunque de la otra forma debería funcionar también, pero quizá está ocurriendo algún problema cuando creas la copia, es un poco difícil saberlo sin el resto del código.

Saludos

[Italico76]

Te agradezco @Alexis88 pero...sigue siendo un parche ? (funciona igualito que el mio)


EDIT: ahora creo que el problema esta en que al clonar una parte del DOM, la copia queda almacenada en una variable (newNode) y THIS quedaria apuntando a esa variable y no al DOM

Asi el parche creo siempre es necesario.

[Alexis88]

Hice un par de pruebas que quizá puedan servirte de guía.

Prueba 1
Prueba 2

Y es cierto, el tratamiento de this en JS es un tanto complejo, pero con perseverancia, se logra entenderlo.

Saludos

[IsaBelM]

el primer error que se observa es que usas un tag <a> donde no tiene sentido usarlo ya que no va a ver ninguna redirección, el segundo es que usas javascript en línea y el tercero es que al clonar el objeto también se clona su id. esto último es de fácil solución. en lugar de this.id, usa this (con lo que haces referencia al objeto)

[Italico76]

Iniciado por IsaBelM

el primer error que se observa es que usas un tag <a> donde no tiene sentido usarlo ya que no va a ver ninguna redirección, el segundo es que usas javascript en línea y el tercero es que al clonar el objeto también se clona su id. esto último es de fácil solución. en lugar de this.id, usa this (con lo que haces referencia al objeto)

Gracias!

Uff... me siento como cuando miro un codigo ajeno de PHP... en una sola linea pueden cometer tantos errores!!? ... y ahora me pasa a mi aqui

O sea... mejor uso un[B]button[/B] y le agrego un listener onlick como me decia @Alexis88 ?


Voy a probar!!!

EDIT: "solucionado"......... tengo algun bug... que espero resolver pero EXCELENTE Isabel!

[Italico76]

Código Javascript:

<button type="button" onclick="delete_me(this);" class="no_decorar" id="cambiame_al_copiarme"  title="delete it">[x]</button>
 

@IsaBelM : te hice caso..... y ya funciona! la pregunta es... cuando no es mala practica el hacer el Javascript inline ?

[Alexis88]

Iba a sugerirte lo mismo que IsabelM, pero quería resolverlo del otro modo.

De preferencia, trata de hacer la referencia a la función desde JS, pero también es válido hacerlo desde los atributos onNombreEvento. En el caso de los enlaces, lo ideal es utilizarlos solo para hacer redirecciones, pues ese es su fin y si quieres hacer otras cosas, usa botones.

Saludos

[IsaBelM]

Iniciado por Italico76

@IsaBelM : te hice caso..... y ya funciona! la pregunta es... cuando no es mala practica el hacer el Javascript inline ?

como te comenta, alexis es una mala practica pero no quiere decir no sea válido. lo suyo es tener el css y javascript embebido o externo

en cuanto al uso de botones. yo ni tan siquiera los usaría en este caso, ya que eso implicar que la sintaxis ha de ser

<form>
control
</form>

en su lugar suelo usar <span>

[Alexis88]

No es necesario colocar botones en formularios para interactuar con ellos y funciones que realicen redirecciones o cualquier otra acción, para eso se puede elaborar un método en JS que simplifique esa labor y afecte no solo a uno sino a un grupo de elementos.

Saludos

[IsaBelM]

Iniciado por Alexis88

No es necesario colocar botones en formularios para interactuar con ellos y funciones que realicen redirecciones o cualquier otra acción,

aunque lo he leído y releído no entiendo que quieres decir

Iniciado por Alexis88

para eso se puede elaborar un método en JS que simplifique esa labor y afecte no solo a uno sino a un grupo de elementos.

Saludos

supongo que te refieres a event.target o algo así

[Alexis88]

Claro, algo más orientado a eventos.

[IsaBelM]

en lo personal no me gusta usar event.target ya que por cada pulsación de ratón hay que evaluar.

pero continuo sin entender que relación tiene lo que expongo aquí con lo que comentas aquí

[Italico76]

IsaBelM: lo que quieres decir con eso es que el tipo <button> no se deberia usar fuera de un formulario al igual que el <input> ?

Aca mas razones porque usar <button> debe estar muy justificado y no hacerse a la ligera

[IsaBelM]

Iniciado por Italico76

IsaBelM: lo que quieres decir con eso es que el tipo <button> no se deberia usar fuera de un formulario al igual que el <input> ?

exacto. la sintaxis, al igual que la semántica, es importante

[Alexis88]

El comentario que hago es precisamente por lo que dices:

Iniciado por IsaBelM

en cuanto al uso de botones. yo ni tan siquiera los usaría en este caso, ya que eso implicar que la sintaxis ha de ser

<form>
control
</form>

Es decir, das a entender que solamente es viable utilizar botones con formularios, algo con lo que no estoy de acuerdo, pues como te vuelvo a decir, orientándonos a eventos, es posible crear métodos que realicen las operaciones que queramos, además de poder aplicarlos a varios elementos y no a uno o dos en particular. Lo que no entiendo es por qué crees que los botones solo deben ser utilizados en formularios, pues para enviar datos de formularios a procesarse (lo más común), se utiliza un elemento <input> de tipo submit, los <button> pueden tener esa funcionalidad, pero también otras.

Saludos

PD: Si tienes algún artículo en el que se trate sobre este tema, te agradeceré que lo compartas con la comunidad, quizá me equivoque y tu afirmación tenga sustento en algún documento de l W3C.

[Italico76]

Sin saber mucho del tema hay una tendencia hacia "la web semantica" y los buscadores empiezan a darle relevancia ya que facilita el parseo y la clasificacion de la informacion

[IsaBelM]

si te vale con lo que dice mdn

Está definido como: Elemento de control para formulario.

[Alexis88]

Disculpen la tardanza en contestar, estuve pintando mi dormitorio.

Cómo cambia la figura cuando el argumento presenta un sustento documentado. Particularmente, me parece erróneo limitar la asociación de este elemento a otros entornos ajenos a los formularios, es decir, si se pueden utilizar elementos <input> de tipo submit y button, ¿para qué añadir un elemento <button>? Me parece algo innecesario, pero la W3C tendrá sus razones.

Saludos

[Italico76]

Iniciado por Alexis88

si se pueden utilizar elementos <input> de tipo submit y button, ¿para qué añadir un elemento <button>? Me parece algo innecesario, pero la W3C tendrá sus razones.

Quizas no este mal usar <button> fuera de un formulario:


Fuera de su "ambito" (el formulario), ya que no tendria sentido un <button type="submit"> ni un <button type="reset"> sino solo seria un <button type="button">...

... con la ventaja sobre un <input type="button"> que puede contener otros elementos como imagenes!



Segun esta interpretacion que hago, creo todos tienen razon: @IsaBelM porque es cierto que es un elemeto para formularios (y por eso tiene los tipos "submit" que es implicito dentro del formulario y el "reset") pero tambien @Alexis88 porque retiene una funcionalidad extra (type="button") que es util en otros escenarios


offtopic: como quedo el dormitorio Alexis88 ?

[Alexis88]

Es precisamente a lo que me refería, mi estimado señor Bozzolo.

Y con respecto a la pregunta, quedó bien pintado, al igual que yo. No subo fotos de cómo quedé porque son muy vergonzosas.

Saludos