Javascript使用html擦除旧元素

我有滑块，让用户有机会选择时间范围。基于此时间范围，屏幕上会以某种样式打印一些消息。我正在为以下标记之间的消息生成样式

                <section> .... </section>

当我更改决定新消息范围的滑块值时，新消息将位于旧消息之后。我只想要新范围的所有消息，而不是旧范围的消息。 您还可以看到我的代码中的JSFIDLE

---

在将子元素附加到“节”之前，您可以说

  $('section').children().remove(); 

清除“部分”中的所有内容

这会将你所在区域内的所有内容都移除。不过要小心。如果您的分区中已有其他元素，这些元素也将被删除。如果你想避免的话。将要添加的内容和要删除的内容放在与其他内容分离的元素中

像这样

<section>
    <div>
        //all your other content
    </div>

    <div id='sliderContent'>
        //all your slider content
     </div>
</section>

这将使您不必再向dom追加节了

如果我理解正确，从注释中可以看出它是正确的，您不需要每次更改滑块时都追加新的内容，如果您这样做，请注意，您不能对多个元素使用相同的id

有HTML格式的，比如

---

如何删除节：$section.remove；

---

如何删除其子项：$section.children.remove

如果使用jQuery，为什么要执行document.getElementsByTagName'body'[0]之类的操作？请创建一个JSFIDLE JSFIDLE.net。因为我尝试在没有它的情况下创建它，但它没有响应为什么要直接将它附加到body？没有其他内容吗？如果不使用body.innerHTML，如果有其他内容，请将要清除的内容放在a中，并每次清除div…或者，为什么每次都要创建新的节。。？看起来您只需要一个节？@tlindell html返回一个字符串，该字符串没有属性remove。假设您的意思是$section.remove-这是一个需要执行的函数，因此它应该是$section.remove我最初执行.html.remove的原因是因为看起来op在节中有一个字符串。我的答案仍然不正确吗？jQuery有空方法$收藏，我得看看。我以前见过，但从未用过。你喜欢它胜过删除？它只打印最后一个message@MIRMIX这就是你要问的-我的问题是如何删除我的旧消息我的意思是新消息在旧消息后面。我的问题是如何删除我的旧邮件。。我只想看到新范围的所有消息，而不是旧的one@MIRMIX如果你在循环中所做的一切都是正确的，那么它就会工作。我的答案显示了如何替换元素中的内容。如果没有所有要复制的代码或演示，我们就不知道你在说什么。例如，我们不知道什么是ctime[0]。。。尝试更新问题，使其更加清晰，如果可能的话，包括最少的演示。

<section>
    <div>
        //all your other content
    </div>

    <div id='sliderContent'>
        //all your slider content
     </div>
</section>

$('section #sliderContent').children().remove();

<section id="cd-timeline" class="cd-container"></section>

$(function() {
    $( "#slider-5" ).slider({
       range:true,
       min: parseInt(ctime[0]),
       max: parseInt(ctime[ctime.length-1]),
       values: [ parseInt(ctime[4]),parseInt(ctime[len])],

       change: function( event, ui ) {
          $( "#slidevalue" )
             .val( formatDateTime(ui.values[ 0 ]) + " - " + formatDateTime(ui.values[ 1 ]) );

             new_var=ui.values[0];

             for (var x=0;parseInt(ctime[x])<ui.values[0];x++);

             for (var x = 0;parseInt(ctime[x])<=ui.values[1]; x++) {
                 var datum = new Date(parseInt(ctime[x]));
                 var outerDiv = document.createElement('div');
                 outerDiv.className = 'cd-timeline-block';
                 $('#cd-timeline').html(outerDiv); // replace the content of existing section

                 var div = document.createElement('div');
                 div.className = 'cd-timeline-img cd-location';
                 outerDiv.appendChild(div);

                 var img = document.createElement('img');
                 img.src = 'img/cd-icon-location.svg';
                 img.setAttribute('alt', 'Location');
                 div.appendChild(img);

                 var div = document.createElement('div');
                 div.className = 'cd-timeline-content';
                 outerDiv.appendChild(div);

                 var h2 = document.createElement('h2');
                 div.appendChild(h2);
                 h2_text = document.createTextNode('foo');
                 h2.appendChild(h2_text);

                 var p = document.createElement('p');
                 div.appendChild(p);
                 p_text = document.createTextNode(<?php echo json_encode($content);                                           ?>[x]);
                 p.appendChild(p_text);

                 var span = document.createElement('span');
                 span.className = 'cd-date';
                 div.appendChild(span);
                 span_text = document.createTextNode(formatDateTime(datum));
                 span.appendChild(span_text);
             }
       }
   });
 });