Hoje, encontrei uma demanda muito estranha, que é assim: quando clico no texto, um botão de exclusão aparece para excluir o texto que acabei de clicar.
Ei? Pensei nisso naquele momento, não era difícil. Mas, como era uma demanda estranha, como poderia ser tão simples?
Sim, há outra função. Não sei qual tag eu cliquei. Existem muitas tags que podem transportar texto em inglês ...
Naquela época, fiquei confuso. Você não sabia qual tag para clicar, como faço para vincular o evento? Para quem eu amarrei o evento? Eu ainda tinha que escrever depois de falar por um longo tempo. Então eu comecei a trabalhar.
Minha ideia é assim:
COMEÇAR
1. Primeiro, você deve obter o objeto clicado pelo mouse. (A questão é ... como sei qual eu cliquei)
Em seguida, escreva uma função para clicar o objeto pelo mouse
A função get_tag está ligada ao evento OnClick do corpo e, em seguida, um parâmetro de evento é aceito;
Em seguida, o objeto de evento possui um atributo de destino, que é um objeto que pode obter diretamente o clique do mouse.
Vamos fazer login para ver
Bem, está tudo bem. É consistente com a ideia anterior e obtenha o resultado desejado.
2. Obtenha o objeto. Mas como excluí -lo?
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}}Como o botão Excluir nada tem a ver com o objeto em que clicamos, precisamos escrever um fechamento e declarar uma tag para salvar o objeto em que clicamos.
Em seguida, retorne duas funções, uma obtém. Usado para obter o objeto que o mouse clicou na última vez. Um é del. Como o nome indica, exclua o objeto que foi clicado.
Como é um fechamento, a tag será salva na memória, apenas para realizar a função desejada.
3. Combinação dos dois
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}} var dt = del_tag (); // atribuir del_tag à função dt get_tag (e) {var ele = e.target; // Call dt.get () O parâmetro é o valor do parâmetro get_tag de eventos da função dt.get ($ (ele)); } $ ('#del'). Clique (function () {// aqui, porque o fechamento é criado, o objeto que clicamos na última vez foi salvo. // para que você possa ligar diretamente dt.del () aqui excluir o objeto dt.del ();})4. Confira o efeito
5. O efeito é muito bom. Mas ... você pode excluí -lo clicando em um determinado objeto. Isso é uma bagunça? Então mude
var del_tag = function () {var tag = null; return {get: function (e) {tag = e; }, del: function () {$ (tag) .remove (); }}} var dt = del_tag (); // atribuir del_tag à função dt get_tag (e) {var ele = e.target; $ (ele) .css ('borda', '1px sólido vermelho') var tagname = ele.tagname; // Defina uma matriz de tags. Usado para armazenar o objeto que queremos excluir var Tagarr = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']; // julga se o objeto que clicamos é declarado em nossa matriz, podemos excluí -lo. if (TaGarr.IndexOF (TagName)> -1) {// Call Dt.get () parâmetro é o valor do parâmetro GET_TAG FUNCTIVEM TARVEN DT.GET ($ (ELE)); }} $ ('#del'). Clique (function () {// aqui, porque o fechamento é criado, o objeto que clicamos na última vez foi salvo. // para que você possa ligar para dt.del () aqui para excluir o objeto dt.del ();})Confira o efeito:
Sim. Parece certo. Não pode ser excluído se não for o objeto que definimos.
Embora seja um pouco diferente do texto excluído mencionado nos requisitos. Mas, desde que você me diga que usará esses rótulos para hospedar o texto, eu posso excluí -lo ...
Deixe -me enfatizar que nossa função get_tag () não pode ser colocada no corpo ou no evento html onclick. Caso contrário, o texto de toda a página será excluído ...
A função get_tag () está ligada à div que você deseja excluir o texto.
O artigo acima JS recebe o objeto clicado pelo mouse e clica em outro botão para excluir o código de implementação do objeto é todo o conteúdo que compartilhei com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.