If div changes content

Question

if a div changes its content after a button click, is there some way to hide another div.

for example after i hit on submit button <div id="dynamic">1</div> changes to <div id="dynamic">2</div> once it shows 2 i would like to hide the submit button completely.

i was trying to work something with the below, hope it makes sense.

        $(document).ready(function(){
            $('#dynamic').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
                $("#submitbutton").hide();
            })
        })

thanks in advance.

can't you just `button.hidden = true` or `button.remove()` or `button.style.display = 'none'` within its click handler or the submit one? — Andrea Giammarchi, Jul 17 '20 at 07:29
Does this answer your question? [jQuery Event : Detect changes to the html/text of a div](https://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div) — Dalorzo, Jul 17 '20 at 07:30
the content in div#dynamic changes what i would like is that when the content of that divs shows 2 the button will be hidden. — Daniel Portelli, Jul 17 '20 at 07:31
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - plus, I cannot see anywhere in your code where you tried to match that `2` textContent — Roko C. Buljan, Jul 17 '20 at 07:31

score 0 · Answer 1 · answered Jul 17 '20 at 07:35

If there is some async action involved and you don't know the exact timing when the content will be changed you could use a MutationObserver to observe a specific DOM element and execute logic if the condition within the MutationObserver is met: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

If the change of your div content is based on an API call that returns the change you could run a callback function to hide the submit button once the promise is fullfilled: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

If it is really as simple as in your example, that you click on submit and then logic to change the div is executed, you could just write the logic to hide your submit button on the next line or as a callback function after click execution.

jonasdev · Answer 2 · 2020-07-17T07:49:58.053

0

If you are using newer version of jQuery, bind is deprecated and you should use on instead. This works for me, though as mentioned in another answer this might not be fully cross browser compatible.

$(document).ready(function(){
  $('body').on('DOMSubtreeModified', '#dynamic', function(event) {
    $("#submitbutton").hide();
  });
});

Here's a link to a working example: https://jsfiddle.net/ky43hx6q/

edited Jul 17 '20 at 07:49

answered Jul 17 '20 at 07:41

jonasdev

696
5
11

this is superb now, what i would like is that only when
2
submitbutton is hidden, on other content it will show – Daniel Portelli Jul 17 '20 at 07:50
You mean something like this @DanielPortelli? https://jsfiddle.net/ky43hx6q/1/ – jonasdev Jul 17 '20 at 07:57
hi jonasdev, thanks mate, yes however the content changes after each time we hit the submit button, it will start with value 3 then 2, when the value changes to 2 i would like taht the submit button be hidden. – Daniel Portelli Jul 17 '20 at 08:08

If div changes content

2 Answers2