Targeting Klicken Sie auf die Schaltfläche „Löschen“ (X) im Eingabefeld

Mit jQuery können Sie Ihr Projekt ganz einfach zum Laufen bringen. Obwohl es in den letzten Jahren in Ungnade gefallen ist, lohnt es sich immer noch, die Grundlagen zu lernen, insbesondere wenn Sie schnell auf die leistungsstarken Methoden zugreifen möchten.

Obwohl jQuery eine leistungsstarke Bibliothek ist, kann sie nicht alles. Hier bietet sich ein solides Verständnis von Vanille-JavaScript an.

Angenommen, Sie haben ein Wikipedia Viewer-Projekt wie dieses:

Search on Wikipedia

Search Random Article
$("#searchbox").keyup(function(event) { if(event.keyCode === 13) { $("#searchbutton").click(); }; }); $("#searchbutton").click(function() { var searchInput = document.getElementById("searchbox").value; searchInput = searchInput.toLowerCase(); if(searchInput !== "") { var myRequest = new XMLHttpRequest(); myRequest.open('GET','//en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ searchInput + '&utf8=&format=json&origin=*'); myRequest.onload = function() { var searchResults = JSON.parse(myRequest.responseText); $(".resultingarticles").empty(); for(i=0; i<10; i++) { var articleTitle = searchResults.query.search[i].title; var articleSnippet = searchResults.query.search[i].snippet; var articleId = searchResults.query.search[i].pageid; var articleLink = "//en.wikipedia.org/?curid=" + articleId; $(".resultingarticles").append("" + " " + "

"+articleTitle+"

" + "

" + articleSnippet + "

" + " " + ""); }; }; myRequest.send(); }; });

Alles funktioniert wie erwartet - Sie können Text in das Suchfeld eingeben, die Eingabetaste oder die Schaltfläche "Suchen" drücken und eine Liste der Wikipedia-Artikel anzeigen.

Da Sie type="search"für Ihr inputElement verwenden, fügt der Chrome-Browser am Ende der Eingabe automatisch ein "X" hinzu, wenn Text vorhanden ist und Sie den Mauszeiger über die Eingabe bewegen. Beachten Sie, dass andere Browser möglicherweise type="search"anders umgehen .

Wenn Sie auf das "X" klicken, verschwindet der Text.

Angenommen, Sie haben bereits eine Liste mit Artikeln, und wenn Sie den Text löschen, möchten Sie auch die ausgefüllten Artikel löschen:

Es stellt sich heraus, dass durch Klicken auf das "X" im Suchfeld ein "Such" -Ereignis ausgelöst wird. jQuery unterstützt das "Such" -Ereignis nicht, daher müssen Sie einen Ereignis-Listener in Vanille-JavaScript schreiben:

document.getElementById("searchbox").addEventListener("search", function(event) { $(".resultingarticles").empty(); });

Wenn jetzt ein Suchereignis ausgelöst wird, können Sie mit jQuery das divElement mit den Artikeln löschen :