Remove a text at the end of each paragraph - jQuery

Question

Remove a text at the end of each paragraph - jQuery

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I want to remove a text at the end of each paragraph.

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) --> ¿?

What would be the possibility of removing what I previously added? Passing the same text that I added?

Code 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); 
});

I will explain myself better: I have X I have with 4 paragraphs, by clicking "Add" I add "Hello" at the end of each paragraph, I click again "Add" and add "Hello" at the end of each paragraph. If I click "Remove" later, I would have to delete the last "Hello" (.substr (-4)), right? but if I pulse more than 2 times "Remove", I can not delete more text than it is predefined. If I pulse more times "Remove" than "Add" there could be the problem, I must control that.

jquery html

asked by omaza1990 09.05.2017 в 15:50

source

3 answers

3

You can try the following to see if this works for you.

$(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>

I use span and a counter to keep track of what I add, and then I'm eliminating the last one.

answered by 09.05.2017 в 16:11

1

If you know, the number of characters you want to remove at the end, that is always going to be 10 or 20, you can remove an example with the substring function. substr examples in 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);

answered by 09.05.2017 в 15:57

String stored inside an array becomes undefined in JavaScript How to display a message with Toast within a Thread in Android Studio?

score 1 · Accepted Answer

I do not suggest using id since you mention that you are going to add text to many paragraphs, if so use a class.

To remove the last addition, it is a matter of going through all the paragraphs and looking for the last <span> to remove it from the text, example:

$("#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();
  });
});

Working example:

$(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>