使用jquery从背景图像中删除：：before CSS

我想在：背景图像之前删除

Php文件

    <li class="vi">
    <a href="javascript:;">
<span class="play-btn"></span><img src="/v1.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster"> 
    </a>
    <h5>Videos 2</h5>
    </li>

JS文件

jQuery('img.videoGPoster').click(function () {
    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery（'img.videoGPoster'）。单击（函数（）{
视频=''；
jQuery（this.replaceWith）（视频）；
});

我在之后使用过这个代码，但它不起作用

jQuery('.play-btn').click(function () {
    alert();

    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';

    jQuery(this).replaceWith(video);
});

jQuery（'.play btn'）。单击（函数（）{
警惕（）；
视频=''；
jQuery（this.replaceWith）（视频）；
});

图像是=>

---

我想点击图像按钮，然后播放视频，然后播放按钮不显示，但现在播放按钮显示。请任何人帮助删除jquery上的播放按钮。=>

您不能使用

jQuery

直接删除

伪元素

，但您可以在某个

类上设置
：before
，然后使用
jQuery
删除该类


jQuery（'img.videoGPoster'）。单击（函数（）{
视频=''；
jQuery（this.replaceWith）（视频）；
jQuery（'.vi'）.removeClass（'bg'）；
});
li.bg:之前{
位置：绝对位置；
最高：30%；
宽度：120px；
高度：120px；
内容：“；
背景：url（images/play.png）；
背景尺寸：封面；
左：30%；
转换：翻译（0%，0%）；
}


视频2
不能使用jQuery选择伪选择器，因此不能直接修改其行为。但是使用jQuery，您可以向DOM元素添加类或删除类，在本例中，比如说
li
。然后您可以使用CSS属性来创建它


jQuery（'img.videoGPoster'）。单击（函数（）{
视频=''；
jQuery（this）.parents（“li.vi”）.addClass（“playing”）；
jQuery（this.replaceWith）（视频）；
});
li.vi{
位置：相对位置；
}
六：以前{
位置：绝对位置；
最高：30%；
宽度：120px；
高度：120px；
内容：“；
背景：url(http://img.jetbitts.com/android/thumbs/ico/0/google-play-android.jpg);
背景尺寸：封面；
左：30%；
转换：翻译（0%，0%）；
}
玩：以前{
显示：无；
}


视频2


视频2
但还有一个问题，我在一个循环中有两个图像，我单击了一个图像，然后“两个播放”按钮都显示为“无”。然后您可以在jQuery中使用一些父子关系或兄弟关系来检测要隐藏的确切图像。检查我使用的更新答案。parents（）来解决问题。如果我的设计师在图像上添加了“播放”按钮，那么我的视频将无法播放。检查我的代码。
jQuery('.play-btn').click(function () {
    alert();

    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';

    jQuery(this).replaceWith(video);
});