Javascript 通过jquery在div上实现Close（X）选项

我写了下面的代码，在页面顶部插入一个横幅，然后点击横幅，它应该

关闭

div。但是我想在横幅的右上角显示

关闭

选项。有人能帮忙吗

 <script>
function banner_load() {
                   jQuery('<span id="banner"><span class="banner-wrap" style="border-radius: 2px;    box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4);    display: block;    font-size: 10pt;    font-weight: bold;    margin: 0 0 5px;    padding: 5px 5px 5px 5px;    position: relative;    vertical-align: middle;   color: white;"><span id="close" style="background: rgba(255,255,255,0.1);   -webkit-border-radius: 50%; -moz-border-radius: 50%;    -ms-border-radius: 50%; -o-border-radius: 50%;  border-radius: 50%; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25);    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); color: #FFFFFF; cursor: pointer;    font-size: 18px;    font-weight: normal;    height: 22px;   line-height: 24px;  position: absolute; right: 11px;    text-align: center; top: 9px;   -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out;    -o-transition: color 0.2s ease-in-out;  transition: color 0.2s ease-in-out; width: 22px;" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;">x</span><img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto"></span></span>').insertBefore('#rootContainer');  
            setTimeout(function(){
                if(typeof triggerResizeEvent === 'function'){ triggerResizeEvent(); }    
            },300);
            setTimeout(function() {
              document.getElementById('banner').style.display='none';
              if(typeof triggerResizeEvent === 'function'){
                triggerResizeEvent()
                }
            }, 40000);   

        };
        window.onload = function(){banner_load();};     

    //  for no space          jQuery('<span id="banner"><span class="banner-wrap" style="border-radius: 2px;    box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4);    display: block;    font-size: 10pt; font-weight: bold;    margin: 0 0 0px;    padding: 0px 0px 0px 0px;    position: relative;    vertical-align: middle;   color: white;"><span id="close" style="background: rgba(255,255,255,0.1);   -webkit-border-radius: 50%; -moz-border-radius: 50%;    -ms-border-radius: 50%; -o-border-radius: 50%;  border-radius: 50%; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25);    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25); color: #FFFFFF; cursor: pointer;    font-size: 18px;    font-weight: normal;    height: 22px;   line-height: 24px;  position: absolute; right: 11px;    text-align: center; top: 9px;   -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out;    -o-transition: color 0.2s ease-in-out;  transition: color 0.2s ease-in-out; width: 22px;" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;">x</span><img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto"></span></span>').insertBefore('#rootContainer'); 
          //

</script>

函数banner_load（）{
jQuery（'x'）。insertBefore（'#rootContainer'）；
setTimeout（函数（）{
如果（triggerResizeEvent==='function'）{triggerResizeEvent（）；}
},300);
setTimeout（函数（）{
document.getElementById（'banner'）.style.display='none'；
if（triggerResizeEvent的类型=='function'）{
triggerResizeEvent（）
}
}, 40000);   
};
window.onload=function（）{banner_load（）；}；
//对于无空格jQuery（'x'）。insertBefore（'rootContainer'）；
//

您可以使用jQuery

show（）

和

hide（）

函数显示或隐藏div。请参阅以下代码：

$(document).ready(function(){
    $(".banner-wrap").click(function(){
        $("#banner").hide();
    });
});

---

首先，请从行中删除代码

jQuery（''）.insertBefore（'#rootContainer'）

不建议这样做，最好将这段代码放在html文件中，并使用jquery
hide（）show（）
函数对其进行操作

是的，你可以在某处添加关闭按钮

<span id="banner" style="height: auto;display: block;" class="banner">
  <span class="banner-wrap">

    //close button code goes here and please manipulate this DOM using jquery

    <img src="https://www.goindigo.in/content/dam/goindigo/6e-website/banner/target/2018/07/WebBanner_RoundTrip_020718_b.png" class="img-responsive" style="height:auto">
  </span>
</span>


//关闭按钮代码在这里，请使用jquery操作此DOM
将父id改为

$('#banner').click(function(){
    $(this).remove();
});

将html和css部分发布到您的代码中，可以使代码更具可读性吗？只要把代码格式化就行了