添加关闭按钮以在不修改标记的情况下出现在DIV元素中

Question

我想知道是否可以添加，然后是样式，我的 close按钮只需关闭当前元素（或隐藏当前div）点击。我想这样做，而无需手动进入标记并为近距离编写HTML。我想知道是否可以使用纯粹的jQuery或JavaScript解决方案。

Answer 1

var button = document.createElement('button');
button.innerHTML = 'X';
button.onclick = function() {
  this.parentNode.style.display = 'none';
};
document.getElementById('close-me').appendChild(button);

<div id="close-me">
  Close me please!
</div>

Answer 2

$(".Content-Div").append("<button class='close-btn'>Close Me</div>");
$(".close-btn").click(function() {
  $(this).parent().fadeOut(800);
})

.Content-Div {
  width: 40%;
  margin: 20px 4%;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, .15);
  background: rgba(0, 0, 0, .05);
  float: left;
  position: relative;
  padding: 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.close-btn {
  width: 100%;
  height: 50px;
  background: red;
  color: #FFF;
  font: 20px Arial;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, .15);
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Content-Div">
  Content
</div>
<div class="Content-Div">
  Content
</div>