JSFiddle - React, Tailwind, and code Playground
HTML
<div id="base">
<ul class="list">
<li class="remove">wrong</li>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
JavaScript
function checkDomStructure() {
var elementNodeType = 1;
var rootEl = document.getElementById('base');
if ( !rootEl ) return false;
if ( rootEl.nodeName != 'DIV' ) return false;
var listNodes = rootEl.getElementsByClassName('list');
if ( listNodes.length > 1 ) return false;
var listEl = listNodes[0];
if ( listEl.nodeName != 'UL' ) return false;
var text = '';
var wasWrong = false;
for (var i=0; i<listEl.childNodes.length; i++) {
var currNode = listEl.childNodes[i];
if ( currNode.nodeType == elementNodeType ) {
if ( currNode.nodeName != 'LI' ) return false;
var content = currNode.textContent;
if ( currNode.className == 'remove' && content == 'wrong' ) {
wasWrong = true;
} else {
text += content + ' ';
}
}
}
if ( text != 'one two three ' ) return false;
return wasWrong;
}
// --- service part ---
var res = false;
try {
res = checkDomStructure();
} catch (e) {}
var msgEl = document.createElement('h1');
msgEl.textContent = 'Sorry, try again.';
if (res) {
msgEl.textContent = 'Congratulation!';
msgEl.style.color = 'green';
}
document.body.appendChild(msgEl);