<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8">
</head>
<body>
The button code (may need to adjust CSS):
<button class="remove-button">[x]</button>
<div>
<div class="pane">
<h3>Horse</h3>
<p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
</div>
<div class="pane">
<h3>Donkey</h3>
<p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
</div>
<div class="pane">
<h3>Cat</h3>
<p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
</p>
</div>
</div>
<script>
/*Here the work goes*/
let panes = document.querySelectorAll('.pane');
//select all the elem classed pane as css selector grammar '.pane'
/*loop all the .pane elements and add the [x]button
and all the remove button becomes the first child of each pane
the CSS was already set in css file for the button.
lastly add the onclick to remove the pane => pane.remove();
*/
for(let pane of panes){
pane.insertAdjacentHTML("afterbegin",'<button class="remove-button">[x]</button>');
pane.firstChild.onclick = () => pane.remove();
//button becomes first child of the pane
}
</script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8">
</head>
<body>
The button code (may need to adjust CSS):
<button class="remove-button">[x]</button>
<div>
<div class="pane">
<h3>Horse</h3>
<p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
</div>
<div class="pane">
<h3>Donkey</h3>
<p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
</div>
<div class="pane">
<h3>Cat</h3>
<p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.
</p>
</div>
</div>
<script>
/*Here the work goes*/
let panes = document.querySelectorAll('.pane');
//select all the elem classed pane as css selector grammar '.pane'
/*loop all the .pane elements and add the [x]button
and all the remove button becomes the first child of each pane
the CSS was already set in css file for the button.
lastly add the onclick to remove the pane => pane.remove();
*/
for(let pane of panes){
pane.insertAdjacentHTML("afterbegin",'<button class="remove-button">[x]</button>');
pane.firstChild.onclick = () => pane.remove();
//button becomes first child of the pane
}
</script>
</body>
</html>
댓글
댓글 쓰기