Question

我使用下面的代码来附加从api

获取的一些数据

for (i = 0; i < d.length; i++) {
    //alert(d[i].food_name);
    $('#myModal .modal-body').append("<span>" + 
          d[i].food_name + "</span><span>" + 
          d[i].redeem_code + "</span><span 
          class='food_price'>" + d[i].food_price + " 
         </span><span class='food-check'><input value=" + 
          d[i].food_id + " type='radio' redeem=" + 
          d[i].redeem_code + " food-price=" + 
          d[i].food_price + " food_name="+ d[i].food_name 
          + " name='food' class='select'></span><br>");
}

当api第二次出现时，旧数据也会显示新数据。为了解决这个问题，我尝试使用.html()，但只使用了最后一条记录。请帮忙。没有得到它。

Answer 1

使用.empty（）清空元素中的内容

$('#myModal .modal-body').empty().append()

Answer 2

你需要在进入循环之前清除html 。所以保留附加，但在循环之前使用下面的：

$('#myModal .modal-body').empty();

请参阅this JSfiddle作为示例。

Answer 3

使用.html("")代替.html()清除所选DOM的innerhtml。

关于你的问题。

Var newHtml=" ";
For(loop)
{
newHtml= newHtml+ "your data[i]";
}
OldHtml.html(" ");

OldHtml.html(newHtml);

以上代码会将新数据附加到您的html。

Answer 4

您可以使用replaceWith()方法，它会将所选元素替换为新内容。

您需要在迭代时将html存储在变量中，并且可以替换该元素。

let html = '';
for (i = 0; i < d.length; i++) {
    html += `<span> ${d[i].food_name} </span>
            <span> ${d[i].redeem_code}</span>
            <span class='food_price'> ${d[i].food_price} </span>
            <span class='food-check'>
                <input value=" ${d[i].food_id} type='radio' redeem='${d[i].redeem_code}' food-price= ${d[i].food_price} food_name="${d[i].food_name} name='food' class='select'>
            </span>
        <br>`
}
$('#myModal .modal-body').replaceWith(html);

如何在添加新的html内容时删除旧的HTML？

4 个答案: