JS get the mouse to click on the object, click another button to remove the object's implementation code _javascript tips

Today encountered a very wonderful demand, is this: When I click on the text to pop a delete button, you can delete the text just clicked.

Eh? There was no difficulty in thinking about it. However, since the demand for exotic flowers can be so simple.

Yes, there's another feature. I don't know which label I ordered, English can carry the label of the text too much ....

I was so stupid. You don't even know which label to order, how can I bind the event? Who is the binding event? After half a day's time, I still have to write.

My idea is this:

START

1, first get the mouse to click on the object. (The problem is ...). How do I know which one to order?

So first write a function to get the mouse to click on the object bar

Get_tag This function is bound to the body's OnClick event, and then accepts an event parameter;

The event object then has a target attribute , which is the object that can directly get the mouse click.

Let's look at the log.

Yes, it's OK. It's consistent with a predetermined line of thought. Got 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 ();
      }
  }

Because the Delete button has nothing to do with the object we clicked on. So we have to write a closure and declare a tag to save the object we clicked on.

And then returns two functions, a get. Used to retrieve the object from the last click of the mouse. One is Del. As the name suggests, delete the clicked object.

Because it is a closure, tag will be saved in memory. Just to achieve the desired functionality.

3. The 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;
    The call to the Dt.get () parameter is the target
    dt.get ($ (ele)) of the value of the Get_tag function event parameter;
  }

  $ (' #del '). Click (function () {    
    //here, because the closure was created. The object we clicked last was saved.
    So here you can simply call Dt.del () to delete the object
    Dt.del ();
  }

4. Look at the effect

5. The results are not bad. Clicking on a random object can be deleted. Is this a mess? Then change.

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;
    Defines a tag array. Used to store objects we want to delete
    var tagarr = [' SPAN ', ' H1 ', ' H2 ', ' H3 ', ' H4 ', ' H5 ', ' H6 ', ' P '];
    If we click on an object that is not declared in our array, we can delete it.
    if (Tagarr.indexof (tagname) >-1) {      
      //Invoke the Dt.get () parameter is the target
      dt.get ($ (ele)) of the value of the Get_tag function event parameter;
    }

  $ (' #del '). Click (function () {  
    
    //here, because the closure was created. The object we clicked last was saved.
    So here you can simply call Dt.del () to delete the object
    Dt.del ();
  }

Look at the effect:

Well, that's right. It is not possible to delete objects that are not defined by us.

Although it's a little different from what you need to say about deletion. But if you tell me that you're going to use those tags to carry text, I can delete ...

Let's stress it. Our Get_tag () function can not be placed on the body or HTML onclick event. Otherwise the text of the entire page is deleted ....

The Get_tag () function is bound to the div where you want to delete the text.

This JS to get the mouse click on the object, click another button to delete the object's implementation code is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.