Question:
How to remove previously added text from a div and write a new one if it exists?
<html>
<head>
<title>Календарь</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>.colored {background-color: green;}</style>
</head>
<body>
<div class="ttt">
<table width="200" border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Пн</td>
<td>Вт</td>
<td>Ср</td>
<td>Чт</td>
<td>Пт</td>
<td><font color="#E4723A">Сб</font></td>
<td><font color="#E4723A">Вс</font></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td align="center">1</td>
<td align="center">2</td>
<td align="center" class="sss">3</td>
<td align="center">4<!----></td>
</tr>
<tr>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">10</td>
<td align="center">11</td>
</tr>
<tr>
<td align="center">12</td>
<td align="center">13</td>
<td align="center">14</td>
<td align="center">15</td>
<td align="center">16</td>
<td align="center">17</td>
<td align="center">18</td>
</tr>
<tr>
<td align="center">19</td>
<td align="center">20</td>
<td align="center">21</td>
<td align="center">22</td>
<td align="center">23</td>
<td align="center">24</td>
<td align="center">25</td>
</tr>
<tr>
<td bgcolor="#FF8040" align="center"><b>26</b></td>
<td align="center">27</td>
<td align="center">28</td>
<td align="center">29</td>
<td align="center">30</td>
<td align="center">31</td>
</tr>
</table>
<button class="polucit">Получить текстовое содержимое</button>
</div>
<div class="vivod"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$("td").click(function() {
$(this).toggleClass("colored");
});
$( ".polucit" ).on("click", function(){
$.each($('.colored'), function (index, value) {
$('.vivod').after($(value).html()+',');
});
});
</script>
</html>
Answer:
Use a method that overwrites all content rather than changing existing content, such as .text()
$( ".polucit" ).on("click", function() {
const data = []; // создай массив для значений
$(".colored").each(function (i, elem) {
data.push( $(elem).text() ); // собери все значения циклом
});
$(".vivod").text(data.join(", ")); // перезапиши вывод
});