Avoiding HTML markup-specific coding
In the unobtrusive JavaScript approach, where selector-based frameworks such as jQuery play major role, the interaction between HTML content and JavaScript is done through CSS selectors.
Getting ready
Let's assume we have a container with ID alert and our intention is to hide it and its neighbors—meaning, hide all elements of its parent:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript" src="markup-dependent.js">
</script>
<title>Markup dependent jQuery</title>
</head>
<body>
<div>
<a href="#" id="trigger">Hide alert's siblings</a>
</div>
<div id="alert-parent">
<div id="alert-sibling1">
Alert Sibling1
<...
