Javascript使用html删除旧元素

Question

我有滑块，给用户选择时间范围的机会。基于这个时间范围，在屏幕上打印了一些带有某种样式的消息。我有点产生风格，为这些信息之间的标签。

                <section> .... </section>

当我更改确定新消息范围的滑块值时，新消息将出现在旧消息之后。我只想要新的范围的所有信息，而不是旧的。您可以看到我的代码的jsFiddle和这里

$(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];

                 var body = document.getElementsByTagName('body')[0];
                 var section = document.createElement('section');
                 section.id = 'cd-timeline';
                 section.className = 'cd-container';
                 body.appendChild(section);

                 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';
                     section.appendChild(outerDiv);

                     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);
                 }
           }
       });
     });

Answer 1

在将子元素追加到“区段”之前，可以这样说

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

处理掉“区域”内的所有东西

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

像这样

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

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

然后在jquery中使用

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

这将使您不必再向dom添加一个节了。

Answer 2

如何删除该部分：$("section").remove();

如何移除其子级：$("section").children().remove();