Cómo acceder a varios nombres de clases seleccionados por medio de una variable dinámica $(‘.’ + nombreDeClase)
Creé un formulario para generar urlname y urllink. Este formulario genera tres elementos:
1- el elemento span (muestra urlname y urllink en html)
2- input de tipo hidden con urlname
3- input de tipo hidden con urllink.
$(document).on("click", ".url_remove", function () {
var refurllink = $(this).data("nburl");
var allclasssameurl = $('.' + refurllink); // <- devuelve [] o s.fn.init length 0
//$this.parent().closest('input[type=hidden]').find($('.' + refurllink)).remove();
$('input[type=hidden]').find(allclasssameurl).remove(); // no funciona
$(this).parent().remove(); // funciona correctamente
}); // Eliminar enlace
Problema: la consola muestra s.fn.init length 0 o [ ]
No sé por qué obtengo este resultado.
No puedo seleccionar los dos inputs hidden más cercanos al span.
davy.ai
Explicación de código y del problema
El fragmento de código proporcionado muestra un controlador de eventos click para el elemento
.url_remove
en un formulario que genera nombres y enlaces URL. Comienza obteniendo el atributodata-nburl
del elemento clicado, que se utiliza para encontrar todos los elementos con el mismo nombre de claserefurllink
.La siguiente línea de código intenta encontrar los inputs ocultos con el nombre de clase
refurllink
utilizando la función$()
y llamando al métodofind()
en el elementoinput[type=hidden]
. Sin embargo, este enfoque no funciona como se espera y devuelve un objeto jQuery vacío o de longitud0
(s.fn.init
).El problema con el código es que el método
find()
busca elementos descendientes deinput[type=hidden]
, mientras que los inputs ocultos que estamos tratando de eliminar son hermanos del elemento clicado. Para solucionar esto, podemos utilizar el métodoparent()
para obtener el elemento padre del elemento clicado (que contiene los dos inputs ocultos) y luego encontrar los inputs ocultos utilizando el métodofind()
.Solución
Reemplaza la línea:
$('<input type="hidden">').find(allclasssameurl).remove(); //doesn't work
con:
$(this).parent().find('.' + refurllink).remove(); // works fine
Esto seleccionará el elemento padre del elemento clicado y luego encontrará los inputs ocultos con el mismo nombre de clase
refurllink
y los eliminará.Aquí está el fragmento de código modificado: