Show popup after removing div

Question

I would like to remove div first, then show my popup. But while showing the alert I am able to see the div. Once closing the popup the div will be removed.

$("#btnRemoveDiv").on("click",function(){$("#divRemove").remove();
alert("Removed");});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="divRemove">Remove this div first then show the popup. Dont show this while the popup is opened!</div>
<input type="button" id="btnRemoveDiv" value="Remove">

@quirimmo Please see this:

Hi Divya, please add your jsfiddle editing your question, it's easier to check for people who read the question — quirimmo, May 19 '17 at 09:54
Better even: include the relevant code in the question, so the question remains valid even if the fiddle is removed or modified. — Peter B, May 19 '17 at 09:55
Due to asynchronous nature when the `remove()` is run alert is popped up and the alert box takes the focus away from the current window, and forces the browser to read the message. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed. Source - w3schools — Bhavik Patel, May 19 '17 at 09:57
Which chrome version did you test this on? And is it chromium? — gaganshera, May 19 '17 at 09:59
Works on 49.0.2623.108. Means it worked before. All solutions will be a workaround then. — gaganshera, May 19 '17 at 10:10

quirimmo · Accepted Answer · 2017-05-19T10:18:47.503

8

Use when to manage it as a promise and it should work:

$("#btnRemoveDiv").on("click",function(){
  $.when($('#divRemove').remove()).then(function() {alert('removed');});
});

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<div id="divRemove">Remove this div first then show the popup. Dont show this while the popup is opened!</div>
<input type="button" id="btnRemoveDiv" value="Remove">

JSfiddle:

https://jsfiddle.net/91x9ta3n/12/

edited May 19 '17 at 10:18

answered May 19 '17 at 10:12

quirimmo

9,800
3
30
45

1

nope, this doesnt work with the chrome v58.0.3029.110. – Mark May 19 '17 at 10:16
not working in chrome :( – divya May 19 '17 at 10:16
could you try the jsfiddle instead of the snippet here please? the jsfiddle seems to work – quirimmo May 19 '17 at 10:16
jsfiddle works fine – Mark May 19 '17 at 10:17
yeah same here. @divya I have your same version of chrome and the jsfiddle is working fine. The snippet wasn't. Maybe some reason within the snippet functionality – quirimmo May 19 '17 at 10:18
you used the wrong jquery framework in here (2.1.1) and in the jsfiddle is the jquery 3.2.1. You can add it also in here manually. – Edwin May 19 '17 at 10:18
thanks a lot Edwin, trying it right now – quirimmo May 19 '17 at 10:19
http://stackoverflow.com/questions/14105766/jquery-callback-within-the-remove-function – Zakaria Acharki May 19 '17 at 10:21
@Edwin good spot, that was the issue with the snippet. Thanks a million :) – quirimmo May 19 '17 at 10:21
yes its working for some clicks. But I test it repeatedly and its breaking for some clicks. – divya May 19 '17 at 10:22
@divya Tried it clicking ten times and it works – quirimmo May 19 '17 at 10:27
@quirimmo How can I share a snapshot? – divya May 19 '17 at 10:28
@ZakariaAcharki We all know that remove() should be sync. But the example doesn't work. Here a jsfiddle which implements it sync using a function after the remove: https://jsfiddle.net/91x9ta3n/15/ – quirimmo May 19 '17 at 10:28
@divya which version of jQuery are you using? or are you having the issue in my examples too?(here and jsfiddle) – quirimmo May 19 '17 at 10:29
using same fiddle link provided by you – divya May 19 '17 at 10:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/144646/discussion-between-divya-and-quirimmo). – divya May 19 '17 at 10:33
weird, It's working always fine to me, tried another ten times :D Btw if you will use a timeout, please use just 4ms of delay, no need of half second – quirimmo May 19 '17 at 10:33

score 1 · Answer 2 · edited May 19 '17 at 11:38

1

Use a timeout so the alert and the remove doesn't execute at the same time.

$("#btnRemoveDiv").on("click", function () {
    $("#divRemove").remove();
    setTimeout(function () {
        alert("Removed");
    }, 500);
});

jsfiddle: https://jsfiddle.net/91x9ta3n/7/

edited May 19 '17 at 11:38

Majid Parvin

4,499
5
29
47

answered May 19 '17 at 09:59

Sander Meijer

85
4

if you want this solution just put a timeout of the minimum interval, 4ms, no need for half second of delay – quirimmo May 19 '17 at 10:00
timeout is not a solution – divya May 19 '17 at 10:00
also, i think there is a typo in your `setTimout` – Bhavik Patel May 19 '17 at 10:00
@divya - what is it that you are trying to achieve? Because you will see the `div` if `remove()` is not run before `alert` pop's up as `alert ` forces browser to read the message – Bhavik Patel May 19 '17 at 10:04
@BhavikPatel I would not like to see the div while showing the poup – divya May 19 '17 at 10:07
2

timeout is the only solution because alert stop browser do repaint. – KAngel7 May 19 '17 at 10:07
i dont understand why he doest want to use a timeout... – Sander Meijer May 19 '17 at 11:46

Show popup after removing div

2 Answers2