CODEWITHSUNDEEP
javascriptjquery
Water Cooler v2
Water Cooler v2

Reputation: 33870

Remove dynamically added div on timer

I'd like a div to appear for a short duration of time and then go away.

So, I dynamically create the div on the click of a button, and then after some work is done, I'd like it to be removed from the DOM.

So, I set up a timer like so:

var contentJoinTab = $("#...");
var divIdSubscribePleaseWait = "div-subscribe-pleasewait";


btnSubscribe.on("click", function (event) {

    displaySubscriptionWait();

    postMailingListSubscription();

});

function displaySubscriptionWait() {
    var s = `<div id = ${divIdSubscribePleaseWait} class = "${classMailingListPleaseWait}">Please wait...</div>`;

    contentJoinTab.append(s);
};

function postMailingListSubscription() {

    // fake for now
    window.setTimeout(function() {
        removeSubscriptionWait();
    }, 4000);

};

function removeSubscriptionWait() {
    contentJoinTab.parent(`${divIdSubscribePleaseWait}`).remove();

   // I've even tried the following to no avail
   // $(`${divIdSubscribePleaseWait}`).remove();
   // contentJoinTab.find(`${divIdSubscribePleaseWait}`).remove();
};

However, even though there is no error in the call to the remove() method, the div I am trying to remove remains in the DOM and is visible.

I do understand event propagation but my understanding is that that's not relevant here. That would have been relevant if I wanted to attach an event to the click (or any other event) of the dynamically created div or any of its parent.

Upvotes: 0

Views: 283

Answers (4)

chebaby
chebaby

Reputation: 7750

update removeSubscriptionWait function : 

function removeSubscriptionWait() {

    contentJoinTab.find('#'+`${divIdSubscribePleaseWait}`).remove();
};

Upvotes: 0

charlietfl
charlietfl

Reputation: 171689

You have appended that div as a child of contentJoinTab but when you go to remove it you are looking for it as being parent of contentJoinTab

You also need to add the ID prefix in selector

try changing

contentJoinTab.parent(`${divIdSubscribePleaseWait}`).remove();

To

contentJoinTab.find(`#${divIdSubscribePleaseWait}`).remove();

Upvotes: 0

DSCH
DSCH

Reputation: 2376

You may be missing # when calling removeSubscriptionWait And also need "" for id = ${divIdSubscribePleaseWait}. Please see changes below in case it isn't clear: 

function displaySubscriptionWait() {
    var s = `<div id = "${divIdSubscribePleaseWait}" class = "${classMailingListPleaseWait}">Please wait...</div>`;

    contentJoinTab.append(s);
};

function postMailingListSubscription() {

    // fake for now
    window.setTimeout(function() {
        removeSubscriptionWait();
    }, 4000);

};

function removeSubscriptionWait() {
    contentJoinTab.parent(`#${divIdSubscribePleaseWait}`).remove();

   // I've even tried the following to no avail
   $(`#${divIdSubscribePleaseWait}`).remove();
};

Upvotes: 2

andylamax
andylamax

Reputation: 2073

You can do that by setting outerHTML of that div to null

function addDiv() {
  let s = "<div id='tempDiv'>Temporary Div</div>"
  let root = document.getElementById("root")
  root.innerHTML += s;
}

function removeDiv() {
  let theDiv = document.getElementById("tempDiv");
  theDiv.outerHTML=""
}


addDiv()

setTimeout(removeDiv,2000)
<div id=root>

</div>

Upvotes: 0

Related Questions