1

Me gustaría eliminar una palabra y su definición (introducidos vía formulario a través de una caja de texto) con JQuery.

Tengo el siguiente html:

<div id="definiciones"> 
        <h2> Definiciones</h2>
        <label for="palabra">Palabra</label>
        <input type="text" name="palabra" id="palabra"/> <br />
        <label for="concepto">Concepto</label>
        <input type="text" name="concepto" id="concepto"/> <br />
        <input type="button" value="Añade definicion" id="añadeDefinicion" /> 
        <input type="button" value="Quitar definiciones" id="quitaDefinicion" /> <br />
        <h4>Lista de Definiciones</h4>
        <dl id="listaDefiniciones">
        </dl>
</div>

Y en el javascript tengo el botón recogido y una función que añade una definición (funciona).

$(function(){

    $("#añadeDefinicion").click(añadirDefinicion);

});

function añadirDefinicion (){
    var palabra = $("#palabra").val(); 
    var concepto = $("#concepto").val(); 
if (palabra!="" && concepto!="") { 
    var padre = $("#listaDefiniciones"); 
    var nuevodt=$("<dt></dt>").text(palabra); 
    var nuevodd=$("<dd></dd>").text(concepto);
    padre.append(nuevodt); 
    padre.append(nuevodd);
}else { //Si los campos están vacíos, lanza una alerta
    alert("Alguno de los campos está vacío. Escribe algo!")
 }
} //fin funcion añadirDefinicion

La pregunta es esa, con esos parámetros, ¿cómo podría hacer para eliminar una palabra (y su definición) que haya introducido anteriormente? Ejemplo con lo que tengo hasta ahora:

Ejemplo de lo que se ve hasta ahora

Es decir, quiero que al apretar el botón "quitar definiciones" me coja el valor de la caja de texto "palabra" y me elimine esa palabra (en el ejemplo "perro") y las definiciones asociadas (en el ejemplo "animal de cuatro patas"). Gracias.

4
  • 1
    Sugerencia: ¿No seria más practico que pusieras un boton pequeño al lado de cada definición para su eliminación? Lo digo porque parece raro la forma en que quieres hacerlo.
    – masterguru
    el 29 dic. 2021 a las 19:18
  • Lo que pasa es que me lo piden de esa forma, pero no soy capaz de dar con la tecla.
    – Serzox
    el 29 dic. 2021 a las 19:24
  • ¿Lo de Añadir definición te funciona? No veo el codigo donde lo haces (me refiero a que no veo como recoges el evento de darle al boton). Debes poner un ejemplo mínimo y verificable, sino perdemos interes en ayudarte porque nos lo tenemos que trabajar nosotros
    – masterguru
    el 29 dic. 2021 a las 19:29
  • Sí, no lo había añadido. Ahora ya está.
    – Serzox
    el 29 dic. 2021 a las 19:36

1 respuesta 1

1

Mirando tu código veo que una posible solución, y aprovechando las funcionalidades de la api de jQuery, seria la siguiente.

Agrega este código a tu javascript:

$( "#quitaDefinicion" ).click(function() {
  quitarDefinicion();
});

function quitarDefinicion() {
  var palabra = $("#palabra").val();
  $('dt:contains("' + palabra + '")').next().remove();
  $('dt:contains("' + palabra + '")').remove();
} //fin funcion quitarDefinicion

Explicación:

  1. Primero captamos el evento click del botón con id quitarDefinicion mediante la función .click de jQuery que ya conoces, y le ponemos como única acción llamar a la función quitarDefinicion (aunque no hace falta, puedes poner su contenido en el click mismo, pero a efectos de comprensión lo he puesto así).

  2. Creamos una función quitarDefinicion() que básicamente captura la palabra a eliminar del input con id palabra (val()) y que primero busca el elemento que sigue immediatamente (next()) al elemento indicado (dt) que a su vez contenga el valor de la palabra (contains()). Con esto conseguimos identificar el elemento dd que acompaña a esa definición de termino dt. Y lo borramos primero (antes que el propio término! eso es importante). Es decir, esto:

    $('dt:contains("' + palabra + '")').next().remove();
    

    Y luego eliminamos del DOM la propia definición de término buscada:

    $('dt:contains("' + palabra + '")').remove();
    

Evidentemente no es lo más óptimo, pero sí lo más facil de implementar dado tu código actual. Sino habria que reescribirlo entero y no entra dentro del ámbito de esta respuesta hacerlo.

5
  • Lo acabo de probar y parece que funciona perfectamente. Yo estaba intentando hacer una función para buscar la palabra, que me devolviese su posición en un índice y que luego se eliminase la posición del dt a la que correspondía, pero esto creo que es más sencillo y mejor, porque lo otro que estaba planteando yo me daba problemas. Muchas gracias :) Por cierto, en este caso se puede acceder directamente al dt porque solo hay uno, ¿no? Lo digo porque parece que no es necesario usar la id="listaDefiniciones" (que contiene el dl en el que se engloban las definiciones que añado).
    – Serzox
    el 29 dic. 2021 a las 21:39
  • A ver, la solucion que he puesto es exclusivamente para el contexto que has preguntado, y en ese contexto funciona. Si quieres practicar con el encontrarás tu código en esta web: jsfiddle.net/Lcmg34xh donde puedes editarlo como quieras y ejecutarlo mediante el botón RUN, y asi verificar tus cambios. Lo del indice tambien lo habia pensado, pero entonces hubiera tenido que reescribir tu codigo a conciencia, y no creia que eso te ayudara en nada, así que he optado por la solución simple y sencilla (aunque no es perfecta, ya te daras cuenta supongo, pues quedan muchas cosas en el aire)
    – masterguru
    el 29 dic. 2021 a las 21:58
  • Gracias también por la recomendación de esa página, estoy empezando con el tema y no la conocía. Una cosa, el uso de las comillas simples y dobles en este caso: $('dt:contains("' + palabra + '")').next().remove(); por lo que veo es invariable, ¿no? Es decir, tiene que ser ese uso de comillas sí o sí para que funcione.
    – Serzox
    el 29 dic. 2021 a las 22:17
  • Si, al principio cuesta un poco de entender la mezcla de comillas que teoricamente encierran strings (cadenas) como por ejemplo "Mi casa de campo es bonita" pero si quieres reemplazar campo por una variable la tienes que sacar de la cadena asi: "Mi casa de " + variable + " es bonita". Eso es lo facil, pero luego se complica cuando te encuentras con esto: 'dt:contains("' + palabra + '")' porque es una cadena que debe ir entrecomillada, pero a su vez ya tenia una comilla simple que la cubria, y de ahi esa sintaxis. Si quitas la variable seria asi: 'dt:contains("perro")'
    – masterguru
    el 29 dic. 2021 a las 22:25
  • Vale, gracias :)
    – Serzox
    el 29 dic. 2021 a las 22:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.