iOS 10 Safari Issue with <select> element no more in DOM - safari

Question

With this link you can reproduce the bug.
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 a <select> element and remove it from dom and after that you click on the link test. You should see the old <select> element pop for selection.
is there some hack to fix that ?

Answer 1

I was able to reproduce this issue. The problem is, whenever you are trying to remove the select box on its change event then iOS10 is not able to properly unbind the selectbox. To fix this you need to put your code change event code inside a setTimeout with some timeout value. It is not working with zero timeout value.
http://jsfiddle.net/n62e07ef/
Below is a 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 easy solution would be change the code a bit so don't re-generate the whole select-element, but just the option-elements inside.

Answer 3

I've stumbled upon this bug today. It's like Gautam says in his answer that the event wont unbind before the element it removed.
My solution, blur the element before removing it.
$("#test").blur().remove();