如何使用jquery永久地添加元素，然后它会递增地添加数字，例如Cam 1，Cam 2，Cam 3等

Question

​

所以，我在我的网站上有一个视频流。我有一个默认的Cam 1，它的代码是：

<div class="card mb-3">
    <div class="card-header">
        <i class="fa fa-video-camera"></i> &nbsp;CCTV
        <span class="float-right" id="addcam"><a href="#" onclick="addCamera();">+ add camera</a></span>
    </div>
    <div class="card-body" id="camera-body">
        <p><strong>Cam 1</strong></p>
        <iframe id="cam1" class="container-fluid mb-4" height="500" src="https://www.youtube.com/embed/D-EcyYkv-mU"></iframe>
    </div>
</div>

如果我单击(+ add camera)，它将调用js函数addCamera();

下面是我的js脚本(Jquery)中的代码：

<script>
        function addCamera() {
            <?php $camNumber = 1; $camNumber += $camNumber; ?>
            $("div#camera-body").append("<hr id=\"remove\" style=\"border: 0.2px solid black;\">");
            $("div#camera-body").append("<p id=\"remove\"><strong><?php echo h("Cam " . $camNumber) ?></strong><a href=\"#\" class=\"float-right mr-3\" onclick=\"removeCamera();\" style=\"color:black;\">X</a></p>");
            $("div#camera-body").append("<iframe id=\"remove\" class=\"container-fluid mb-4\" height=\"500\" src=\"https://www.youtube.com/embed\"></iframe>");
        }

        function removeCamera() {
            $("iframe#remove, p#remove, hr#remove").remove();
        }
</script>

如何在添加时增加凸轮的数量？另外，在添加摄像头时，我在右上角放了一个(x)，这样如果你想删除你添加的摄像头，你可以选择删除。但不会删除第一个/默认凸轮。

请帮帮忙，谢谢！

Answer 1

我现在让它工作了，但只在相机数量上递增。下面是我的代码：

<script>
        var camNum = document.getElementsByTagName('iframe');
        camNum.length;
        function addCamera() {
            $("div#camera-body").append("<p><strong>Cam " + camNum.length + "</strong></p><iframe class=\"container-fluid mb-4\" height=\"500\" src=\"https://www.youtube.com/embed\"></iframe>");
        }
</script>