2

Deseo quitar un texto al final de cada párrafo.

Dispongo del 1ero boton: anadir (añade un texto al final de cada parrafo) --> OK
Dispongo del 2ndo boton: quitar (quita el texto al final de cada parrafo) --> ¿?

¿Cómo sería la posibilidad de quitar lo que previamente he añadido? ¿Pasándole el mismo texto que he añadido?

Código jQuery:

//Añadir texto al final de cada parrafo.
$("#anadir").click(function(){
    $("p").append("<strong> Hola </strong>");
});


//Quitar texto al final de cada parrafo.
$("#quitar").click(function(){
    $("p").remove(":contains('Hola')"); /// .substr(-4); 
});

Me explicaré mejor: tengo X tengo con 4 parrafos, al pulsar "Añadir" añado "Hola" al final de cada parrafo, vuelvo a pulsar "Añadir" y añado "Hola" al final de cada parrafo. Si pulso seguidamente "Quitar" tendria que eliminar el último "Hola" (.substr(-4)), ¿no? pero si pulso más de 2 veces "Quitar", no puedo borrar más texto del que no sea predefinido. Si pulso más veces "Quitar" que "Añadir" hay podria estar el problema, debo controlar eso.

2
  • por en la función quitar, pones en vez de quitar?
    – Luis
    el 9 may. 2017 a las 13:54
  • No entiendo, otra opcion que no me funciona seria añadiendo en #quitar lo siguiente: $("p").remove(":contains('texto a buscar')");
    – omaza1990
    el 9 may. 2017 a las 13:59

3 respuestas 3

3

Puedes intentar lo siguiente a ver si esto te funciona.

$(document).ready(function (){
    
    var cont=-1;
    
    $("#agregar").on("click",function(){
          cont++;
          $("#parrafo").append("<span id='"+cont+"'>Hola Mundo!</span>");
    });
    $("#quitar").on("click",function(){
        $("#"+cont).remove();
        cont--;
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor">
    <p id="parrafo"></p>
</div>

<button id="agregar">Agregar texto</button>
<button id="quitar">Quitar texto</button>

uso span y un contador para ir llevando el control de lo que agrego, y despues voy eliminando el último.

4
  • Me funciona en bucle pero unicamente en el primer parrafo, en los demás me los añade pero no los borra. En el primero si los borra.
    – omaza1990
    el 9 may. 2017 a las 14:36
  • por que ocupas el mismo contador para todos, si necesitas que haya independencia, puedes crear un objeto que vaya manejando esto individualmente.
    – Luis
    el 9 may. 2017 a las 14:41
  • Independencia no, deberia ser colectivo, si añado "Hola mundo" a todos, también podre eliminar el "Hola mundo" a todos, ¿no?
    – omaza1990
    el 9 may. 2017 a las 14:43
  • Tal vez no estoy entendiendo bien, me podrías decir que es a lo que te refieres , en que lo metiste a un bucle?
    – Luis
    el 9 may. 2017 a las 15:01
1

No te sugiero usar id´s ya que mencionas que vas a agregar texto a muchos párrafos, de ser así usa una clase.

Para quitar el ultimo agregado es cuestión de recorrer todos los párrafos y buscar el ultimo <span> para quitarlo del texto, ejemplo:

$("#quitar").on("click", function() {
  //seleccionamos todos los parrafos y los recorremos con un each()
  $(".parrafo").each(function(index, elem) {
    //elem es el párrafo seleccionado en el cual vamos a buscar el elemento a eliminar
    $(elem).find('.quitar:last').remove();
  });
});

Ejemplo funcionando:

$(document).ready(function() {
  $("#agregar").on("click", function() {
    $(".parrafo").append("<span class='quitar'>Hola Mundo!</span>");
  });
  $("#quitar").on("click", function() {
    $(".parrafo").each(function(index, elem) {
      $(elem).find('.quitar:last').remove();
    });
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="parrafo">Este texto no se elimina. </p>
<p class="parrafo">Este texto no se elimina. </p>
<p class="parrafo">Este texto no se elimina. </p>

<button id="agregar">Agregar texto</button>
<button id="quitar">Quitar texto</button>

2
  • Muchas gracias por tu respuesta JuankGlezz, el problema viene que en mi HTML (no se puede modificar), los párrafos se llaman de la siguiente manera: <p class="primerparrafo"> <p class="segundoparrafo"> <p class="tercerparrafo"> todos ellos dentro de un <div> llamado "contenido", que a su vez está dentro de un <body>.
    – omaza1990
    el 10 may. 2017 a las 11:24
  • @omaza1990 el ejemplo solo es un ejemplo, solo hay que hacerle las modificaciones en tu caso html no se puede modificar, pero si puedes modificar el javascript en este caso $('.parrafo') pasaría a ser $('p[class$="parrafo"]') lo cual busca todos los <p> que tengan una clase que termine en párrafo más informacion en este enlace, si quieres saber mas formas de seleccionar observa este enlace
    – JuankGlezz
    el 10 may. 2017 a las 14:48
1

Si sabes, la cantidad de caracteres que deseas quitar al final, es decir siempre van a ser 10 o 20 un ejemplo lo puedes quitar con la funcion substr substr ejemplos en jquery

/* Se aplica a tu id o nombre o en este caso a tu parrafo y el -7 es la cantidad de caracteres que quieres quitar */    

.substr(-7);
1
  • Podria ser una solucion, pero si pulso más veces quitar de las que di en añadir, quito el texto predefinido, y eso es lo que no quiero. Me explicaré mejor: tengo X tengo con 4 parrafos, al pulsar "Añadir" añado "Hola" al final de cada parrafo, vuelvo a pulsar "Añadir" y añado "Hola" al final de cada parrafo. Si pulso seguidamente "Quitar" tendria que eliminar el último "Hola" (.substr(-4)), ¿no? pero si pulso más de 2 veces "Quitar", no puedo borrar más texto del que no sea predefinido. Si pulso más veces "Quitar" que "Añadir" hay podria estar el problema, debo controlar eso.
    – omaza1990
    el 9 may. 2017 a las 14:14

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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