Question

在将此问题标记为重复之前：我在这里尝试了其他问题的几乎所有解决方案。我想删除以前添加的元素，但不执行该代码。也许，您还可以告诉我一种更好的方式来将内容存储在var $ content中。

＆＃13;

var messageBoxCount = 0;
function createMessageBox(message) {
  messageBoxCount++;
  var $content = $("<div id='messageBox"+messageBoxCount+"' class='box enabled'><div class='closeMessageBox'></div><p class='messageBoxTitle'>Fehler</p><p class='messageBoxContent'>"+message+"</p></div>");
  $("#messages").append($content);;
  window.scrollTo(0,0);
}
$("#messages").on("click", ".closeMessageBox", function() {
  var close = $(this);
  var currentBox = $(this).parent();
  currentBox.removeClass("enabled");
  currentBox.addClass("disabled");
  setTimeout(function() {$(this).closest(".box").remove();}, 400);
});
createMessageBox("Test");

＆＃13;

.closeMessageBox {
  background-color: red;
  width: 15px;
  height: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messages"></div>

＆＃13;

Answer 1

问题是this未保存在闭包中。改为使用局部变量close。

var messageBoxCount = 0;
function createMessageBox(message) {
  messageBoxCount++;
  var $content = $("<div id='messageBox"+messageBoxCount+"' class='box enabled'><div class='closeMessageBox'></div><p class='messageBoxTitle'>Fehler</p><p class='messageBoxContent'>"+message+"</p></div>");
  $("#messages").append($content);;
  window.scrollTo(0,0);
}
$("#messages").on("click", ".closeMessageBox", function() {
  var close = $(this);
  var currentBox = $(this).parent();
  currentBox.removeClass("enabled");
  currentBox.addClass("disabled");
  setTimeout(function() {close.closest(".box").remove();}, 400);
});
createMessageBox("Test");

.closeMessageBox {
  background-color: red;
  width: 15px;
  height: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messages"></div>

无法访问附加元素

1 个答案: