Aujourd'hui, j'ai rencontré une demande très étrange, ce qui est comme ceci: lorsque je clique sur le texte, un bouton de suppression apparaît pour supprimer le texte que je viens de cliquer.
Hé? J'y ai pensé à ce moment-là, ce n'était pas difficile. Mais, comme c'était une demande étrange, comment pourrait-elle être si simple?
Oui, il y a une autre fonction. Je ne sais pas quelle balise j'ai cliqué. Il y a trop d'étiquettes qui peuvent transporter du texte en anglais ...
À ce moment-là, j'étais confus. Vous ne saviez pas quelle balise cliquer, comment lier l'événement? Pour qui j'ai égalé l'événement? Je devais encore l'écrire après avoir parlé pendant longtemps. J'ai donc commencé à travailler.
Mon idée est comme ceci:
COMMENCER
1. Premièrement, vous devez faire cliquer sur l'objet par la souris. (La question est ... comment savoir lequel j'ai cliqué)
Ensuite, écrivez une fonction pour faire cliquer sur l'objet par la souris
La fonction get_tag est liée à l'événement onClick du corps, puis un paramètre d'événement est accepté;
Ensuite, l'objet Event a un attribut cible, qui est un objet qui peut obtenir directement le clic de la souris.
Connectez-vous pour voir
Eh bien, ça va. Il est cohérent avec l'idée précédente et obtient le résultat souhaité.
2. Obtenez l'objet. Mais comment le supprimer?
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .reMove (); }}}Étant donné que le bouton Supprimer n'a rien à voir avec l'objet sur lequel nous cliquons, nous devons écrire une fermeture et déclarer une balise pour enregistrer l'objet sur lequel nous avons cliqué.
Renvoyez ensuite deux fonctions, une. Utilisé pour obtenir l'objet que la souris a cliqué la dernière fois. L'un est del. Comme son nom l'indique, supprimez l'objet qui a été cliqué.
Puisqu'il s'agit d'une fermeture, la balise sera enregistrée en mémoire, juste pour réaliser la fonction souhaitée.
3. Combinaison des deux
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .reMove (); }}} var dt = del_tag (); // attribue del_tag à la fonction dt get_tag (e) {var ele = e.target; // Appel dt.get () Le paramètre est la valeur du paramètre de l'événement de fonction get_tag dt.get ($ (ele)); } $ ('# del'). cliquez sur (function () {// Ici, car la fermeture est créée, l'objet que nous avons cliqué la dernière fois a été enregistré. // afin que vous puissiez appeler directement dt.del () ici supprimez l'objet dt.del ();})4. Découvrez l'effet
5. L'effet est assez bon. Mais ... vous pouvez le supprimer en cliquant sur un certain objet. Est-ce un gâchis? Puis changez-le
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .reMove (); }}} var dt = del_tag (); // attribue del_tag à la fonction dt get_tag (e) {var ele = e.target; $ (ele) .css ('border', '1px solide rouge') var tagname = ele.tagname; // Définissez un tableau de balises. Utilisé pour stocker l'objet que nous voulons supprimer var tagarr = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']; // Jugez si l'objet que nous avons cliqué est déclaré dans notre tableau, nous pouvons le supprimer. if (tagarr.indexof (tagName)> -1) {// Appeler le paramètre dt.get () est la valeur du paramètre de l'événement de fonction get_tag dt.get ($ (ele)); }} $ ('# del'). cliquez sur (function () {// Ici, parce que la fermeture est créée, l'objet que nous avons cliqué la dernière fois a été enregistré. // afin que vous puissiez appeler dt.del () ici pour supprimer l'objet dt.del ();})Découvrez l'effet:
Oui. Cela semble juste. Il ne peut pas être supprimé si ce n'est pas l'objet que nous définissons.
Bien qu'il soit un peu différent du texte supprimé mentionné dans les exigences. Mais tant que vous me dites que vous utiliserez ces étiquettes pour héberger le texte, je peux le supprimer ...
Permettez-moi de souligner que notre fonction get_tag () ne peut pas être placée sur l'événement Body ou HTML OnClick. Sinon, le texte de toute la page sera supprimé du tout ...
La fonction get_tag () est liée au div que vous souhaitez supprimer le texte.
L'article ci-dessus JS obtient l'objet cliqué par la souris et clique sur un autre bouton pour supprimer le code d'implémentation de l'objet est tout le contenu que j'ai partagé avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.