Javascript 删除类中除两个定位标记外的所有元素

嘿，我做了一个函数，用图像填充幻灯片的空容器，每个图像都包含在它自己的div中

我的网页中有数量不确定的模式图像，单击这些图像时，会打开一个幻灯片相册。我得到了这张用于1个图像的图片，然后意识到，为了让它用于不确定大小的不确定数量的幻灯片，我应该制作一个填充幻灯片分区的函数。我计划让每个模式图像都有一个“1,2,3…等”的数据属性，并有一个包含多个对象的数组，每个对象的名称类似于“1,2,3…等”然后，我将使用这些信息创建正确的div和图像，并将其附加到幻灯片容器中

我已经成功地做到了这一点，但我认为我需要清除除两个按钮（.next和.prev）之外的所有子项的parent.modal content div，因为modal似乎打开了正确的幻灯片，但只有在第一次单击它时，其他时候它只是不断向其中添加越来越多的数组。我相信在关闭幻灯片时清除div应该可以解决这个问题，如果事实上它完全去除了内部元素，我认为我的代码应该这样做，但是我从stackoverflow中得到了它，所以idk是肯定的

我有这段代码来删除div的内容（请注意，这确实是我需要添加排除这两个元素的代码的地方，但我包含了更多上下文代码）：

这是我的HTML：

<div class="row">
  <div class="column">
    <img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="clearSlides(); closeModal();">&times;</span>
  <div class="modal-content" id="modal_content">

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>

&时代；
❮
❯

.modal content div get已填充此js函数：

  function fillSlides(modalID){
    var container = document.getElementsByClassName("modal-content");

    var slides = {
      "1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ],
      "2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ],
      "3": ["Images/LS_09.jpg", "Images/LS_10.jpg", "Images/LS_11.jpg", "Images/LS_12.jpg" ]
    };
    var modal_num = modalID.getAttribute('data-modal');
    //alert(slides[modal_num].length);

    for (var i = 0 ; i < slides[modal_num].length; i++) {
      var the_divs = document.createElement('div');
      var s_img = document.createElement('img');

      the_divs.className = 'mySlides';

      s_img.src = slides[modal_num][i];

      the_divs.appendChild(s_img);

      container[0].appendChild(the_divs);
    }
  }

函数填充幻灯片（modalID）{
var container=document.getElementsByClassName（“模式内容”）；
变量幻灯片={
“1”：[“Images/LS_01.jpg”、“Images/LS_02.jpg”、“Images/LS_03.jpg”、“Images/LS_04.jpg”]，
“2”：[“Images/LS_05.jpg”、“Images/LS_06.jpg”、“Images/LS_07.jpg”、“Images/LS_08.jpg”]，
“3”：[“Images/LS_09.jpg”、“Images/LS_10.jpg”、“Images/LS_11.jpg”、“Images/LS_12.jpg”]
};
var modal_num=modalID.getAttribute（'data-modal'）；
//警报（幻灯片[模式数量].长度）；
对于（变量i=0；i

---

如果需要进一步说明，请告诉我。

由于您正在将类“mySlides”添加到幻灯片中，您可以检查要删除的元素是否确实包含mySlides类。如果没有，则不应将其移除

---

您还可以将按钮移动到一个单独的分区。这将分隔幻灯片和控件，使您可以更自由地操作模态内容。

根据注释，将控件置于模态内容之外。使用

innerHTML='

擦除其中的所有内容

演示

函数clearlides（）{
var content=document.getElementById（'modal_content'）；
content.innerHTML=''；
}
函数closeModal（）{
document.getElementById（'myModal'）.style.display=“无”；
}

&时代；
1/4
2/4
3/4
4/4
❮
❯我该怎么做？你能给我看看吗？我需要向现有的clearlides（）方法添加什么？我想删除mySlides也会删除其中的元素吗？我只是想确认一下？好吧，我不知道它是否有效，我已经在我的帖子中创建了一个提琴，并进行了编辑，进一步解释了我的问题。由于某种原因，我的小提琴的js不会运行。不管怎样，我不认为你所发布的内容有效，或者如果有效，我还有另一个问题，我不知道它是什么，也不知道如何解决它。删除了开头的多余图片。您可以对clearSlides函数调用进行注释以查看函数的结果。代码的问题是有运行时错误。调用showSlides函数时，幻灯片数组为空。因此，您的modal_内容永远不会使用图像更新。但这是不同的问题来解决，而不是清除你的模态_内容div的内容。对不起，我看到了你发布的js，但你的小提琴似乎没有做任何事情？这只是两个箭头和一个X。这只是在model_内容元素中清除幻灯片的演示。它没有任何额外的功能，因为从本主题中我了解到，您在清除div中的幻灯片时有问题，需要在其中留下两个锚定标记。这正是这个fiddle所做的。Change
var container=document.getElementsByClassName（“模态内容”）
to
var container=document.querySelector（'.modal container'）
和
container[0]。appendChild（the_divs）
到
容器。appendChild（the_divs）
将控制箭头保持在
列
之外，并使用
innerHTML=“
清除
列的内部。列
我不想清除。列，我正在尝试清除.modal content确定，然后将控件置于
.modal content
和
innerHTML='
的
.modal content
之外。您的控件看起来是独立的，所以在布局中重新定位它们应该不会有太大的调整谢谢这项工作，但我现在的问题是，因为我使用的是top:50%；在我的CSS中，控制装置在中间和侧面，因为相对于容器的顶部位置，它不再处于中间位置。我是否可以将这些控件设置为顶部：模态内容div的50%，而不必将它们放在div本身中？谢谢，这很有效。我现在的问题是，因为我使用top:50%；在我的CSS中，控制装置在中间和侧面，因为相对于容器的顶部位置，它不再处于中间位置。有安瓦吗
  function fillSlides(modalID){
    var container = document.getElementsByClassName("modal-content");

    var slides = {
      "1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ],
      "2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ],
      "3": ["Images/LS_09.jpg", "Images/LS_10.jpg", "Images/LS_11.jpg", "Images/LS_12.jpg" ]
    };
    var modal_num = modalID.getAttribute('data-modal');
    //alert(slides[modal_num].length);

    for (var i = 0 ; i < slides[modal_num].length; i++) {
      var the_divs = document.createElement('div');
      var s_img = document.createElement('img');

      the_divs.className = 'mySlides';

      s_img.src = slides[modal_num][i];

      the_divs.appendChild(s_img);

      container[0].appendChild(the_divs);
    }
  }