1

I have some inputs and a button. I want to implement function which allows to delete one of recently focused/focused out input.

I set onfocusout function which sets a click listener on button. If I focus on first input then focus out from it and click on button - works fine. But when I focus on first input, then on second and click on button - i get deleteCell() function performed n times i focused out.

How to let it remember only last onfocusout event? It seems to count my onfocusout events before clicking on button.

Thank you.

var input = document.createElement("input");
input.setAttribute("onfocusout", "myFunction()");

function myFunction() {
    document.getElementById("delete-cell").addEventListener("click", function () {
        deleteCell();
    });
}

function deleteCell() {
    alert(1);
}
Yevhenii Ivanisenko
  • 45
  • 4
  • because you keep adding events, addEventListener appends, it does not override. – epascarello Mar 23 '18 at 20:42
  • 1
    It's almost always wrong to add an event handler inside another event handler. – Barmar Mar 23 '18 at 20:43
  • I also tried to set class "focused" for 2 second using setTimeout() onfocusout event, and then clicking on the button find element by this class. In this case i get "Cannot read property 'id' of null" err. Is there a better way to delete input without checkboxes? – Yevhenii Ivanisenko Mar 23 '18 at 21:04

1 Answers1

1

Try adding an on-focusout listener to the relevant class of elements, and then add a "to-delete" class for the element focusedout (using "this" property). But only add this "to-delete" class after you have first removed it from all elements. This should keep you dialed into the element related to the most recent focusout event.

 $(".element-class").on("focusout", function() {
     $(".element-class").removeClass("to-delete");
     $(this).addClass("to-delete");
 })

Then simply write a function that will delete the element with the "to-delete" class, triggered by an on-click event.

Here is fiddle: https://jsfiddle.net/gbrodzik/ej4czqrc/6/

Greg Brodzik
  • 1,765
  • 7
  • 9
  • I tried. It really removes previous element class $(document).ready(function () { $(".cell-input").focusout(function () { $(".cell-input").removeClass("to-delete"); $(this).addClass("to-delete"); }); }); But i can only get element itselft document.getElementsByClassName("cell-input to-delete") and cant get its info. document.getElementsByClassName("cell-input to-delete").getAttribute("id") In any case, thank you – Yevhenii Ivanisenko Mar 23 '18 at 22:47
  • I added a fiddle to my response above demonstrating the functionality. Let me know if I am misunderstanding what you are trying to achieve. – Greg Brodzik Mar 23 '18 at 23:07
  • I needed to get id of last focused out element to send it directly to servlet. I managed to do it. I created a global variable which gets an input element on "focus-out" event. Then clicking on the button "delete" i refer to my global variable which has already got this element. I tried to implement this using local variable thats why i coudn't get input's info. And i started thinking about other ways to get last elements info. Stupid mistake( Sorry and thank you. – Yevhenii Ivanisenko Mar 24 '18 at 14:21