Hoy encontré una demanda muy extraña, que es así: cuando hago clic en el texto, aparece un botón Eliminar para eliminar el texto que acabo de hacer clic.
¿Ey? Lo pensé en ese momento, no fue difícil. Pero, dado que era una demanda extraña, ¿cómo podría ser tan simple?
Sí, hay otra función. No sé en qué etiqueta he hecho clic. Hay demasiadas etiquetas que pueden transportar texto en inglés ...
En ese momento, estaba confundido. No sabías en qué etiqueta hacer clic, ¿cómo encuentro el evento? ¿Para quién empaté el evento? Todavía tenía que escribirlo después de hablar durante mucho tiempo. Entonces comencé a trabajar.
Mi idea es así:
COMENZAR
1. Primero, debe hacer que el objeto haga clic en el mouse. (La pregunta es ... ¿cómo sé en qué hice clic)?
Luego escriba una función para hacer que el objeto haga clic en el mouse
La función get_tag está vinculada al evento OnClick del cuerpo, y luego se acepta un parámetro de evento;
Luego, el objeto de evento tiene un atributo de destino, que es un objeto que puede obtener directamente el clic del mouse.
Iniciemos sesión para ver
Bueno, está bien. Es consistente con la idea anterior y obtiene el resultado deseado.
2. Obtenga el objeto. ¿Pero cómo eliminarlo?
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}}Dado que el botón Eliminar no tiene nada que ver con el objeto en el que hacemos clic, tenemos que escribir un cierre y declarar una etiqueta para guardar el objeto en el que hicimos clic.
Luego devuelva dos funciones, una obtenga. Se usa para obtener el objeto que el mouse hizo clic en la última vez. Uno es del. Como su nombre lo indica, elimine el objeto que se hizo clic.
Dado que es un cierre, la etiqueta se guardará en la memoria, solo para realizar la función deseada.
3. Combinación de los dos
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}} var dt = del_tag (); // asignar del_tag a la función dt get_tag (e) {var ele = e.target; // llamar dt.get () El parámetro es el valor del parámetro de evento get_tag de la función dt.get ($ (ele)); } $ ('#del'). Click (function () {// Aquí, porque el cierre se crea, el objeto que hizo clic la última vez se guardó. // para que pueda llamar directamente a dt.del () aquí Eliminar el objeto dt.del ();})4. Mira el efecto
5. El efecto es bastante bueno. Pero ... puede eliminarlo haciendo clic en cierto objeto. ¿Es esto un desastre? Entonces cámbielo
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}} var dt = del_tag (); // asignar del_tag a la función dt get_tag (e) {var ele = e.target; $ (ele) .css ('border', '1px sólido rojo') var tagName = ele.tagname; // Defina una matriz de etiquetas. Se usa para almacenar el objeto que queremos eliminar var Tagarr = ['Span', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P']; // juzga si el objeto en el que hizo clic se declara en nuestra matriz, podemos eliminarlo. if (tagarr.indexof (tagName)> -1) {// llamar al parámetro dt.get () es el valor del parámetro de evento get_tag de parámetro dt.get ($ (ele)); }} $ ('#del'). Click (function () {// Aquí, porque el cierre se crea, el objeto que hacemos clic la última vez se guardó. // para que pueda llamar dt.del () aquí para eliminar el objeto dt.del ();})Mira el efecto:
Sí. Parece correcto. No se puede eliminar si no es el objeto que definimos.
Aunque es un poco diferente del texto eliminado mencionado en los requisitos. Pero mientras me digas que usará esas etiquetas para alojar el texto, puedo eliminarlo ...
Permítanme enfatizar que nuestra función get_tag () no se puede colocar en el cuerpo o el evento HTML onclick. De lo contrario, el texto de toda la página se eliminará en absoluto ...
La función get_tag () está vinculada al DIV que desea eliminar el texto.
El artículo anterior JS obtiene el objeto que hace clic en el mouse y hace clic en otro botón para eliminar el código de implementación del objeto es todo el contenido que he compartido con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.