Safari iOS 10 issue with <select> element no more in DOM

Question

Using this link you can reproduce the error.

https://jsfiddle.net/pw7e2j3q/

<script> $( "#test" ).change(function() { $("#test").remove(); var combo = $("<select></select>").attr("id", "test2").attr("name", "test"); combo.append("<option>New One</option>"); $("#App").append(combo); }); $("#click").click(function(){ $("#App").remove(); }) </script> 

If you click on the <select> element and remove it from dom, then click on the link test. You should see the old <select> element to select.

Is there any hack to fix this?

Answer 1

I was able to reproduce this problem. The problem is that whenever you try to remove the selection box in your change event, iOS10 cannot correctly unselect the selectbox. To fix this, you need to put the code change code code in setTimeout with some timeout value. It does not work with a zero timeout value.

http://jsfiddle.net/n62e07ef/

The following is the fix for your code:

 <script> $( "#test" ).change(function() { setTimeout( function() { $("#test").remove(); var combo = $("<select></select>").attr("id", "test2").attr("name", "test"); combo.append("<option>New One</option>"); $("#App").append(combo); }, 50); }); $("#click").click(function(){ $("#App").remove(); }) </script> 

Answer 2

One simple solution would be to slightly modify the code so as not to generate the entire select element, but only the option elements inside.

Answer 3

I came across this error today. As Gautam says in his answer that this event will not untie before the deleted item. My solution is to blur the item before deleting it .

  $("#test").blur().remove();