Today I encountered a very strange demand, which is like this: when I click on the text, a delete button pops up to delete the text I just clicked.
Hey? I thought about it at that time, it was not difficult. But, since it was a strange demand, how could it be so simple?
Yes, there is another function. I don’t know which tag I have clicked. There are too many tags that can carry text in English...
At that time, I was confused. You didn’t know which tag to click, how do I bind the event? For whom I tied the event? I still had to write it after talking for a long time. So I started working.
My idea is like this:
START
1. First, you have to get the object clicked by the mouse. (The question is...how do I know which one I clicked)
Then write a function to get the object clicked by the mouse
The get_tag function is bound to the body's onclick event, and then an event parameter is accepted;
Then the event object has a target attribute, which is an object that can directly obtain the mouse click.
Let's log in to see
Well, it's OK. It's consistent with the previous idea and get the desired result.
2. Get the object. But how to delete it?
var del_tag = function(){ var tag=null; return { get:function(e){ tag = e; }, del:function(){ $(tag).remove(); } } }Since the delete button has nothing to do with the object we click on, we have to write a closure and declare a tag to save the object we clicked on.
Then return two functions, one get. Used to get the object that the mouse clicked last time. One is del. As the name implies, delete the object that was clicked.
Since it is a closure, the tag will be saved in memory, just to realize the desired function.
3. Combination of the two
var del_tag = function(){ var tag=null; return { get:function(e){ tag = e; }, del:function(){ $(tag).remove(); } } } var dt = del_tag();//Assign del_tag to dt function get_tag(e){ var ele = e.target; //Call dt.get() The parameter is the value of the get_tag function event parameter dt.get($(ele)); } $('#del').click(function(){ //Here, because the closure is created, the object we clicked last time was saved. //So you can directly call dt.del() here Delete the object dt.del(); })4. Check out the effect
5. The effect is pretty good. But... you can delete it by clicking on a certain object. Is this a mess? Then change it
var del_tag = function(){ var tag=null; return { get:function(e){ tag = e; }, del:function(){ $(tag).remove(); } } } var dt = del_tag();// Assign del_tag to dt function get_tag(e){ var ele = e.target; $(ele).css('border','1px solid red') var tagname = ele.tagName; //Define a tag array. Used to store the object we want to delete var tagarr = ['SPAN','H1','H2','H3','H4','H5','H6','P']; //Judge whether the object we clicked is declared in our array, we can delete it. if(tagarr.indexOf(tagname) > -1){ //Call dt.get() parameter is the value of the get_tag function event parameter target dt.get($(ele)); } } $('#del').click(function(){ //Here, because the closure is created, the object we clicked last time was saved. //So you can call dt.del() here to delete the object dt.del(); })Check out the effect:
Yes. It seems right. It cannot be deleted if it is not the object we define.
Although it is a bit different from the deleted text mentioned in the requirements. But as long as you tell me you will use those labels to host the text, I can delete it...
Let me emphasize that our get_tag() function can not be placed on the body or html onclick event. Otherwise, the text of the entire page will be deleted at all...
The get_tag() function is bound to the div you want to delete the text.
The above article js gets the object clicked by the mouse and clicks another button to delete the implementation code of the object is all the content I have shared with you. I hope it can give you a reference and I hope you can support Wulin.com more.