Edición y eliminación simultánea de elementos
Supongamos que tenemos un conjunto de párrafos:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Hagamos que para estos párrafos se pueda editar el texto de cada párrafo y que al final de cada párrafo haya un enlace para eliminarlo.
Al implementar la tarea descrita, nos enfrentaremos a un problema.
Para entender la esencia del problema, veamos el código HTML que resultará cuando se agreguen enlaces de eliminación al final de cada párrafo:
<div id="parent">
<p>text1<a href="">remove</a></p>
<p>text2<a href="">remove</a></p>
<p>text3<a href="">remove</a></p>
</div>
Imaginemos ahora que al hacer clic en cualquier párrafo, aparecerá un input para editar el texto. En este caso, ¡todo el texto del párrafo ingresará al input, incluido el enlace de eliminación!
Esto, por supuesto, no es correcto.
Una solución más acertada sería envolver los textos
de los párrafos en etiquetas span, así:
<div id="parent">
<p><span>text1</span><a href="">remove</a></p>
<p><span>text2</span><a href="">remove</a></p>
<p><span>text3</span><a href="">remove</a></p>
</div>
Para tal código, simplemente se puede asignar el evento
de edición no al párrafo en sí, sino al
span con el texto. En este caso, el input
para editar aparecerá en la etiqueta
span, y nuestro enlace de eliminación permanecerá
intacto.
Se da el siguiente código HTML:
<div id="parent">
<p><span>text1</span></p>
<p><span>text2</span></p>
<p><span>text3</span></p>
</div>
Agregue un enlace de eliminación al final de cada párrafo.
Haga que al hacer clic en span
aparezca un input para editar en él.
Supongamos ahora que inicialmente no hay etiquetas span:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Primero envuelva el texto del párrafo en etiquetas span,
agregue a estas etiquetas la capacidad de edición,
y luego agregue un enlace de eliminación al final de cada párrafo.
