JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.jsviews.com/download/jsviews.min.js"></script>
<div id="list_simple"></div>
<hr/>
<button id="add">add</button>
<button id="unlink">unlink</button>
<button id="empty">empty</button>
<script id="template" type="text/x-jsrender">
{^{if #data}}
<div id="inner">
{^{>code}}/{^{>name}}
</div>
{{/if}}
</script>
JavaScript
$(function() {
var fruits = {};
$.templates('#template').link("#list_simple", fruits);
$(document)
.on('click', '#add', function(ev) {
$.observable(fruits).setProperty({
code: "99",
name: "ドリアン"
});
})
.on('click', '#unlink', function(ev) {
$.observable(fruits).setProperty({
code: "01",
name: "バナナ"
});
// リンクを解除するだけ。コンテンツはそのまま
$.unlink('#list_simple');
})
.on('click', '#empty', function(ev) {
// 空にすることで、リンクも自動的に解除される(らしい)
$('#list_simple').empty();
});
});