javascript - 如何使用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
                }
            });
        });

我想弄清楚如何“隐藏”我的气泡元素。每个气泡都有一个 X 按钮。我正在使用 .hide() 函数并在发送另一个请求时取消隐藏该元素，但我遇到的问题是，当我发送另一个请求时，它会创建一个新的气泡，然后取消隐藏第一个。因此，每次我使用它发送新请求时，它基本上都会自我复制。
我想我可能需要使用 Foreach 循环。但我不确定。任何帮助是极大的赞赏!

Answer 1

如果你给你的气泡和按钮都相同的类名，例如。 "bubble"和 "btn-exit"然后你可以用 jQuery 遍历它们，这样你就可以将点击事件附加到元素上。
然后在这些附加事件中，您可以找到与您按下的按钮相关的父元素。
例如:

<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>

然后是jQuery:

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

看看这个演示: https://jsfiddle.net/damagex/2mxcyrwh/