[SOLUCIONADO] Agregar y quitar contenido (texto) de un LABEL/DIV en otro con botón

[MajitoARG]

Hola, estoy empezando con esto del JS y no sé cómo resolver este ejercicio.
La idea es la siguiente: tengo una lista de productos con un botón de "agregar" cada uno. Al pulsar el botón se copia el contenido del LABEL (nombre del producto y el input cantidad) en un TEXTAREA.

Pregunta:
1) ¿Cómo agregar varios productos? sólo puedo poner uno solo.
2) ¿Cómo eliminar de la lista los que no quiera porque me arrepentí de agregarlos?
Esto es lo que tengo hasta ahora:

HTML:
<form>
<label id="producto">Producto 1 (cod.001) <input type="number" id="cant"></label>
<br>
<input type="button" value="Agregar" onclick="agregar();">
<br>

<label id="producto">Producto 2 (cod.002) <input type="number" id="cant"></label>
<br>
<input type="button" value="Agregar" onclick="agregar();">
<br>

<label id="producto">Producto 3 (cod.003) <input type="number" id="cant"></label>
<br>
<input type="button" value="Agregar" onclick="agregar();">
<br>

(Varios productos más ...)

<textarea id="caja" rows="5" style="width:300px;"></textarea>
</form>

JS:
function agregar() {
document.getElementById("caja").value = document.getElementById("producto").textContent + document.getElementById("cant").value;

}

Espero se haya entendido y que alguien me ayude =)

[Alexis88]

No debes de utilizar el mismo id en más de un elemento dentro del documento ya que se trata de un valor único e irrepetible. En su lugar, usa clases, además, como una manera de facilitarte las cosas, te sugiero colocar cada grupo de etiqueta + input + button en elementos <div>, de esta manera, para evitar conflictos con los demás elementos, tomarías solo a los elementos del <div> que contiene al botón que acaba de ser pulsado y no a los otros.

Esto podría serte de ayuda:

Código HTML:

<div>
    <label class="producto">Producto 1 (cod.001): </label>
    <input type="number" class="cant" onchange="cambia(this)" />
    <input type="button" value="Agregar" onclick="agregar(this)" disabled />
</div>
        
<div>
    <label class="producto">Producto 2 (cod.002): </label>
    <input type="number" class="cant" onchange="cambia(this)" />
    <input type="button" value="Agregar" onclick="agregar(this)" disabled />
</div>
 
<div>
    <label class="producto">Producto 3 (cod.003): </label>
    <input type="number" class="cant" onchange="cambia(this)" />
    <input type="button" value="Agregar" onclick="agregar(this)" disabled />
</div>
 
<textarea id="caja" readOnly></textarea>
 

Código Javascript:

var objeto = {};
 
function agregar(boton) {
    var padre = boton.parentNode,
        producto = padre.querySelector(".producto").innerText,
        caja = document.querySelector("#caja"),
        cantidad = padre.querySelector(".cant").value,
        numero = producto.match(/\s\d\s/g);
    
    if (numero in objeto){
        delete objeto[numero];
        boton.value = "Agregar";
    }
    else{
        objeto[numero] = producto + cantidad;
        boton.value = "Eliminar";
    }
    
    caja.value = null;
    
    for (var prop in objeto){
        caja.value += objeto[prop] + "\n";
    }
}
 
function cambia(number){
    var boton = number.parentNode.querySelector("[type=button]");
 
    //Solo habilito al botón cuando el elemento de tipo 'number' contenga algún valor
    if (number.value.length){
        boton.disabled = false; 
    }
    else{
        boton.disabled = true;
    }
}
 

Ahora, la explicación. Agrupé a los bloques de label + number + button en elementos <div> para así poder acceder al elemento padre del botón que se pulsará y tomar los valores de los otros dos elementos contenidos (label y number), evitando el conflicto con los otros elementos del mismo tipo. Deshabilité a los botones para evitar que se añadan valores al <textarea> antes de que se haya elegido un valor en los elementos de tipo 'number'. A los elementos de tipo 'number', los vinculé con el evento change para que cuando se elija un valor en ellos, se habilite el botón correspondiente, lo cual ocurrirá al invocar a la función 'cambia'.

Fuera del código de las funciones, declaro a un objeto literal, en el cual iré añadiendo/eliminado los valores que correspondan al botón pulsado.

En la función 'agregar', recibo al botón pulsado como parámetro y declaro variables en las cuales asignaré al elemento que contiene al botón pulsado, al texto del elemento de clase 'producto' contenido en el elemento padre que se tomó en la línea anterior, el área de texto, la cantidad del elemento de tipo 'number' y el número de producto que se encuentra en medio del texto de la etiqueta contenida en el elemento padre.

Si dicho número es una propiedad del objeto declarado al inicio, se la elimina y se le asigna al botón el texto 'Agregar', caso contrario, se añade al objeto el valor del producto concatenado con la cantidad y se vincula esta unión con el número de producto, además, cambio el valor del botón a 'Eliminar'.

Finalmente, limpio al área de texto e itero al objeto para ir añadiendo sus valores al área de texto.

DEMO

Te recomiendo utilizar hojas de estilos (CSS) en lugar de añadir los estilos en cada elemento mediante el atributo style. Es lo que se estila —y recomienda— hacer ahora.

Si crees que le hace falta alguna mejora, creo que con esto ya tienes una buena base para hacer las mejoras que creas conveniente.

Saludos

[MajitoARG]

Hola Alexis, muchísimas gracias! Está perfecta tu resolución! 100% solucionado el tema. Me sirve para adaptarlo a lo que tenía en mente. Saludos!! =)

[MajitoARG]

Hola Alexis! yo de nuevo. Tengo una consulta. Apliqué el código que me pasaste y funcionó perfecto, pero al adaptarlo a un contenido dinámico en Wordpress no funciona. Agrega sólo de a un producto y al agregar otro me borra el anterior y al presionar agregar de nuevo se copia el nuevo producto.

Este es el código PHP:
(...)
<div id="contenedor">
<?php query_posts('category_name=auriculares'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1>AURICULARES</h1>
<div>
<label class="producto"><?php the_title(); ?> [<?php echo get_post_meta($post -> ID, 'codigo', true); ?>]</label>
<input type="number" class="cant" onchange="cambia(this)" />
<input type="button" value="Agregar" onclick="agregar(this)" disabled />
</div>

<?php endwhile; else: ?>
<h1>No se encontraron productos</h1>
<?php endif; ?>
<textarea id="caja"></textarea>
</div>

El nombre del producto y la cantidad ingresada con tu función JS la toma bien, no hay problemas, el tema es que dejan de funcionar los botones, no puedo seguir agregando líneas de texto (producto+cant) en el TEXTAREA.

Me quedé desconcertada =S ¿Sabrás por dónde está el error?