Foros del Web » Programando para Internet » Javascript »

Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

Estas en el tema de Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?) en el foro de Javascript en Foros del Web. Hola! Tengo un textarea que contiene etiquetas html, quisiera eliminar el elemento span cuya id es "spanID"... es posible? qué hago mal en este ejemplo? ...
  #1 (permalink)  
Antiguo 15/01/2010, 16:36
 
Fecha de Ingreso: diciembre-2009
Ubicación: dirname(__FILE__)
Mensajes: 149
Antigüedad: 15 años
Puntos: 11
Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

Hola!

Tengo un textarea que contiene etiquetas html, quisiera eliminar el elemento span cuya id es "spanID"... es posible? qué hago mal en este ejemplo?

De ya muchas gracias

Código HTML:
Ver original
  1. <textarea cols="20" rows="5" id="input-body" >
  2. <p>HolaMundo</p>
  3. <p>Bla bla bla <span id='spanID'>jaja no me borras</span></p>
  4. <input type="button" value="Borra" onclick="borraSpan()"/>


Código Javascript:
Ver original
  1. var span = document.getElementById("spanID");
  2. function borraSpan(){
  3. span.parentNode.removeChild(span);
  4. }

Todo junto:
Código HTML:
<textarea cols="20" rows="5" id="input-body" >
<p>HolaMundo</p>
<p>Bla bla bla <span id='spanID'>jaja no me borras</span></p>
</textarea>
<input type="button" value="Borra" onclick="borraSpan()"/>

<script>
var span = document.getElementById("spanID");
function borraSpan(){
span.parentNode.removeChild(span);
}
</script> 

Última edición por RodrigoG; 15/01/2010 a las 19:10 Razón: agregar 'casi-'
  #2 (permalink)  
Antiguo 15/01/2010, 16:50
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

el contenido de los textareas no se consideran como elementos sino como texto. es decir, el navegador no analiza el contenido para interpretarlo como HTML. para lo que te ocupa, tienes que leer el valor del textarea, buscar la cadena y reemplazarlo por un string vacio.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 15/01/2010, 17:13
 
Fecha de Ingreso: diciembre-2009
Ubicación: dirname(__FILE__)
Mensajes: 149
Antigüedad: 15 años
Puntos: 11
Respuesta: Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

Gracias, me ahorraste mucho tiempo :)

Al final no quedo como quería pero al menos funciona:

Código HTML:
<textarea cols="20" rows="5" id="input-body" >
<p>HolaMundo</p>
<p>Bla bla bla </p>
</textarea>
<input type="button" value="Borra" onclick="borraSpan()"/>

<script>
var contenido = document.getElementById("input-body");
var original = contenido.value;
contenido.value = contenido.value+"<span id='spanID'>jaja no me borras</span>";

function borraSpan(){
contenido.value = original;
}
</script> 
Lo que sucede es que este textarea es de esos esiditores 'lo que vez es lo que escribes' o WSJSHKSJS.... bueno eso.

Saludos
  #4 (permalink)  
Antiguo 15/01/2010, 17:21
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: (SOLUCIONADO) Eliminar elemento dentro de un texarea al clicar botón (Qué

realmente no tiene nada parecido a lo que me referia, pero bueno... lo unico que te puedo adelantar es que no trabajo con editores WYSIWYG. y lo otro, ¿que tal si el usuario introduce un contenido y luego presiona el boton? el contenido introducido por el usuario se perdera sobreescrito por el contenido original. no se si ese sea tu criterio pero lo menciono por si acaso.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 15/01/2010, 17:43
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 16 años, 4 meses
Puntos: 105
Respuesta: (SOLUCIONADO) Eliminar elemento dentro de un texarea al clicar botón (Qué

Hola RodrigoG.... tu primer post..... estabas cerca pero lamentablemente el contenido del textarea no esta considerado como contenido de la web por lo que no podrias acceder directamente a el.

en su segunto post....... ps la verdad esta fatal ....... haha.... ya que estas escapando del problema de una manera muy sonsa.... y ni eso..... simplemente como dijo mi amigo zerokilled... ps cuando siga ingresando.... ya no podras eliminar........

no obstante...... aqui te hize un codigo algo tedioso, pero si funciona.
cabe recalcar... que nose el funcionamiento en reliadad puesto que para que eliminar un span con ese id.... seria bueno que me mencionas al menos tu verdadera finalidad del codigo.
y por ultimo... si hubieran varios..... elimina de uno en uno, puesto que son id.... con getElementById.. solo se obtiene el primer id.
Código HTML:
Ver original
  1. <textarea cols="20" rows="5" id="input-body" >
  2. <p>HolaMundo</p>
  3. <p>Bla bla bla <span id='spanID'>jaja no me borras</span></p>
  4. <input type="button" value="Borra" onclick="borraSpan()"/>
  5. <!-- este span es para procesar el contenido del textarea -->
  6. <span id="spanID_hidden" style="display:none"></span>
Código Javascript:
Ver original
  1. <script>
  2. function borraSpan(){
  3. var span = document.createElement('SPAN'); //creando un elemento span, pudo ser otro
  4. span.innerHTML = document.getElementById("input-body").value; //le asigno el valor del textarea
  5. var spanid_hidden = document.getElementById("spanID_hidden"); //el span a procesar
  6. spanid_hidden.innerHTML = ""; //lo limpio en cada click
  7. spanid_hidden.appendChild(span); //agrego el elemento span con el valor del textarea al span a procesado
  8. var spanid = document.getElementById("spanID"); //el span a eliminar
  9. //aca ya se encuentro el span puesto que lo saque del textarea y lo inclui en una etiqueta span
  10. spanid.parentNode.removeChild(spanid); //lo elimino del span procesado
  11. document.getElementById("input-body").value = span.innerHTML; //le asigno el nuevo valor sin el spanid
  12. }
  13. </script>

de hecho que debe de haber un mejor codigo.... pero ps esa fue mi logica..... espero te sirva.

Gracias por el karma......

Suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #6 (permalink)  
Antiguo 15/01/2010, 19:08
 
Fecha de Ingreso: diciembre-2009
Ubicación: dirname(__FILE__)
Mensajes: 149
Antigüedad: 15 años
Puntos: 11
Respuesta: (SOLUCIONADO) Eliminar elemento dentro de un texarea al clicar botón (Qué

cierto! el nuevo contenido se perdería...
Bien, les cuento la idea original:

En realidad la "truculencia" que intento hacer es
1) mostrar un mapa de GoogleMaps, junto al editor WYSW...
2) El usuario ingresa la dirección o clica en el mapa
3) Las coordenadas se ingresan en un 'span' dentro del editor.

Luego cuando se vea la entrada hay otra función que lee las coordenadas y muestra el mapa si si, es un abuso a la maquina del cliente, pero sería divertido hacerlo.

Lo que preguntaba estaba enfocado en el punto 3, lo demás ya está resuelto.

Si desean pueden ver lo que llevo hasta ahora, pueden copiar y pegar esto en [URL="http://htmledit.squarefree.com/"]http://htmledit.squarefree.com/[/URL] para probarlo online:


Código HTML:
<form action="#" onsubmit="inputMarcador(this.address.value); return false"> 
      <p> 
        <input type="text" size="20" name="address" value="Antofagasta, Chile" /><br />
        <input type="submit" value="Buscar Dirección" />
      </p> 
    <div id="map_canvas" style="width: 200px; height: 400px"></div>
</form>


<textarea cols="60" rows="30" name="edit[body]" id="input-body" class="content-blog rich-text-area "><p><img src="http://images03.olx.cl/ui/2/29/70/17452970_1.jpg?v=1261459779362" style="border: 0; margin: 4px;" /></p>
<p>Vendo celular, como nuevo</p></textarea>


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1XeAYyd-P_Ccn6bAluyCIRQtNytlzrglaCR_ewOv9N_7M7OiSxR0hxdBHBn1Kq_myCNrHTVe3TxJpQ" 
            type="text/javascript"></script> 
    <script type="text/javascript"> 
 
    var map;
    var geocoder;
    var address;
initialize();
 
    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(-23.6456,-70.39821), 15);
      map.setUIToDefault();
      GEvent.addListener(map, "click", getAddress);
      geocoder = new GClientGeocoder();
    }
    
    function getAddress(overlay, latlng) {
      if (latlng != null) {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
      }
    }
 
    function showAddress(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Status Code:" + response.Status.code);
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
		insertaCoordenadas(point);
        marker = new GMarker(point);
        map.addOverlay(marker);
      }
    }
 
 

function inputMarcador(address) {
map.clearOverlays();
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("No encuentro a "+address+"!");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
			  insertaCoordenadas(point);
            }
          }
        );
      }
    }

function insertaCoordenadas(coord){

	var contenido = document.getElementById("input-body").value;
	var mapita = document.getElementById("spanMapa");
	var direccion = "<span id='spanMapa' class='spanMapa'>Dirección: <span>"+coord+"</span></span>";
	if(!mapita){
		document.getElementById("input-body").value = contenido + direccion ;
	}else{
		mapita.parentNode.removeChild(mapita);
		document.getElementById("input-body").value = contenido + direccion ;
	}
}
</script> 
El gran problema es que cuando el usuario ingresa otra dirección o clica el mapa más de una vez, se escribe nuevamente las coordenadas, cuando devieran borrarse las antiguas y reemplazarse por las nuevas...

Perdonen si le aburri, y gracias masterojitos, me pongo de ahora a experimentar con tu idea

Saludos

Nota: Se reciben sugerencias, regaños (el código está muy de novato), etc.
  #7 (permalink)  
Antiguo 15/01/2010, 19:19
 
Fecha de Ingreso: diciembre-2009
Ubicación: dirname(__FILE__)
Mensajes: 149
Antigüedad: 15 años
Puntos: 11
Respuesta: Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

Se me olvido mencionar: Quiero ingresar esto a un blog, de modo que el usuario tenga la posibilidad de insertar un mapa en la entrada.
  #8 (permalink)  
Antiguo 16/01/2010, 06:43
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 16 años, 4 meses
Puntos: 105
Respuesta: Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

bueno fijate si mi codigo en verdad te sirve y respondenos.... ojala que

suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #9 (permalink)  
Antiguo 16/01/2010, 19:35
 
Fecha de Ingreso: diciembre-2009
Ubicación: dirname(__FILE__)
Mensajes: 149
Antigüedad: 15 años
Puntos: 11
Respuesta: Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

Sí masterojitos! tu código me fue muy útil...
pero jejeje me dí cuenta de que estaba mal enfocado, dado que el susodicho editor WYS... utiliza una especie de iframe con los parametros del texarea o algo por el estilo.

Al final tuve que buscar otra solución y opte por insertar las coordenadas dentro de un span dentro del input para dejar etiquetas...

Es decir, cuando se guarda la edición las etiquetas quedan asociadas a la entrada, por lo que luego hago la llamada al id del span dentro de las etiquetas para leer las coordenadas y desplegar el mapita. Por cierto que las etiquetas tienen un 'display:none' para que todo sea invisible al usuario.

En resumen tu respuesta es excelente, el problema fue mi pregunta, pero de todos modos aprendí mucho con la ayuda de ambos, muchas gracias.
  #10 (permalink)  
Antiguo 17/01/2010, 21:02
Avatar de Kenichi  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 160
Antigüedad: 15 años, 11 meses
Puntos: 6
Respuesta: Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

Buenas, lamento venir con la solucion un poco tarde, pero es muy simple:
Código Javascript:
Ver original
  1. document.getElementById('input-body').value = document.getElementById('input-body').value.replace('<span id="spanID">jaja no me borras</span>','');
Tambien puedes eliminarlo sin importar el contenido con el uso de expresiones regulares.
Espero que te haya servido, saludos.
__________________
Cansado de tener que hacer webs con doble login, o no entender nada del codigo de phpBB? Usa un sistema de foros simple, usa Linken Foros
  #11 (permalink)  
Antiguo 18/01/2010, 10:07
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 16 años, 4 meses
Puntos: 105
Respuesta: Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

kenichi...... seria hermoso tu codigo siempre y cuando el contenido del spanID sea siempre "jaja no me borras".... cosa que no creo no???

por eso le di ese codigo ........

y como dije... quizas halla una solucion mejor como la de expresiones regulares.....

Dios os Bendiga a todos.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #12 (permalink)  
Antiguo 18/01/2010, 10:40
Avatar de Kenichi  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 160
Antigüedad: 15 años, 11 meses
Puntos: 6
Respuesta: Eliminar elemento dentro de un texarea al clicar botón (Qué hago mal?)

Con eso me referia a lo de expresiones regulares, aun asi es muy simple:
Código Javascript:
Ver original
  1. // Esta es la expresion regular:
  2. var expresion = /<span id="spanID">(*?)</span>/
  3. // Y con esto lo reemplazamos:
  4. document.getElementById('input-body').value = document.getElementById('input-body').value.replace(expresion, '');
  5. // Y eso es todo
__________________
Cansado de tener que hacer webs con doble login, o no entender nada del codigo de phpBB? Usa un sistema de foros simple, usa Linken Foros

Etiquetas: eliminar, mal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:39.