How can I dynamically hide elements using javascript?

Question

if (fbValue.job_requested) {
    var driver_id = fbValue.driver_id;
    var driver_name = fbValue.driver_name;
    var requested = fbValue.job_requested;
    var time = "00:00";
    var list_id = "list"+driver_id;
    
    if (fbValue.job_requested) {
        time = fbValue.job_requested_time;
    }

    if (requested == "Yes") {
        console.log("test1");
        console.log($("#bubble").is(':hidden'));

        var bubble = "<div class= 'bubble' style=top:" + counter * 100 + "px';>"+driver_name+"<br>"+time+"<a id='"+driver_id+"' class='homeDriver'><span class='icon home'></a></span><a id='"+driver_id+"' class='notifyDriver'><span class='icon comments'></a></span><a id='"+driver_id+"' class='pauseDriver'><span class ='icon pause'></a></span><a id='"+driver_id+"' class='show'><span class='icon list'></a></span><a id = 'close'><span class ='icon close'></span></a></div>";

        var smsBubble = "<div class='smsBubble' id = 'smsBubble'><span class ='icon notifyComments'></span>"+driver_name+"<input type = 'text' class='textNotify' id='message'/><span class ='icon notifyClose'></span><div class='buttons'><a id = '"+driver_id+"'><button class='btn-sendClose'>Send & Close Card</a></button><a id = '"+driver_id+"' class ='sendSms'><button class='btn-send'>Send</a></button></div></div>";

        var pauseBubble = "<div class='pauseBubble' id = 'pauseBubble'><span class ='icon notifyPause'></span>"+driver_name+"<span class ='icon homeClose'></span><a id = '"+driver_id+"' class ='sendPause'><button class='btn-send'>Send</a></button></div></div>";;

        var homeBubble = "<div class='homeBubble' id = 'homeBubble'><span class='icon notifyHome'></span>"+driver_name+"<span class= 'icon notifyClose'></span><div class='buttons'><a id = '"+driver_id+"' class ='sendHome'><button class='btn-send'>Send</a></button></div></div>";

        $("#driverBubble").append(bubble);
        counter++;

        $('body').on('click','.notifyDriver', function(){
            $("#notifyBubble").append(smsBubble);
        })

        $("#close").click(function(){
            $("#driverBubble").hide();
        });

        // Ajax call to send custom message
        $('body').on('click','.sendSms',function(){
            var did = this.id;
            var message = $("#message").val();

            $.ajax({
                url:'sendnews',
                type:'GET',
                success:function(data){
                    $("#smsBubble").hide();
                },
                data: {
                    data: did, message
                }
            });
        });

I am trying to figure out how to "Hide" my Bubble element. Each bubble has an X button. I was using the .hide() function and unhiding that element when another request has been sent but the issue I ran into is that when I send another request it creates a new Bubble and then unhides the first one. So its basically duplicating itself each time I send a new request using this.

I thought I might need to use a Foreach loop. But I am not sure. Any help is greatly appreciated!

DaMaGeX · Accepted Answer · 2020-12-21 19:48:16Z

2

If you give your bubbles and buttons all the same classname eg. "bubble" and "btn-exit" then you can iterate through them with jQuery so you can attach click events to the elements.

Then within these attached events you find your parent element relative from the button you pressed.

So for example:

<div class="bubble"><div class="btn-exit">X</div></div>
<div class="bubble smsBubble"><div class="btn-exit">X</div></div>
<div class="bubble pauseBubble"><div class="btn-exit">X</div></div>
<div class="bubble homeBubble"><div class="btn-exit">X</div></div>

And then the jQuery:

$(".bubble").each(function(k, v) {
    var $bubble = $(this);
  $bubble.find('.btn-exit').click(function(e) {
    $bubble.hide();
  });
});

Take a look at this demo: https://jsfiddle.net/damagex/2mxcyrwh/

answered Dec 21, 2020 at 19:48

DaMaGeX

7637 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DaMaGeX Over a year ago

Alright, just take note that when you create these bubble elements later in the process then you will have to attach these click events again. You might want to look into creating elements using jQuery so you can instantly add the events.

Collectives™ on Stack Overflow

How can I dynamically hide elements using javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related