Javascript使用html删除旧元素

Javascript erasing old elements using html

本文关键字：元素 删除 html 使用 Javascript      更新时间：2023-09-26

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

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

如果我理解正确， (它似乎是正确的从注释)你不需要追加新的<section>每次滑动条被改变(如果你这样做，你不能使用相同的id多个元素)。

在HTML中有<section>，如

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

，那么你可以用$('#cd-timeline').html();替换它的内容，如下所示:

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

如何删除部分:$("section").remove();
如何移除它的子元素:$("section").children().remove();

在向'section'添加子元素之前，您可以输入

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

删除'section'中的所有内容

这将取出section中的所有内容并将其删除。不过要小心。如果你的section中已经有其他元素，这些元素也会被删除。如果你想避免的话。将要添加的内容和要删除的内容放在与其他内容分开的元素中。

这样的

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

然后在jquery中使用

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

这样你就不用再给dom添加section了

相关文章：