Javascript 删除元素时自动滚动

每当从DOM中删除一个元素时，它下面的所有元素都会向上移动以占据新释放的位置。是否有必要对其进行更改，以便如果某个元素聚焦在已移除元素下方，则其上方的所有元素都将向下移动（即向下滚动），且聚焦元素的位置将保持不变

请参阅此代码

<div id="foo">
  <br><br>
</div>
<textarea id="bar" onkeypress="removeFoo()"></textarea>

这是你的电话号码。每当您在文本区域中键入字符时，它会突然移动，以占用通过删除div获得的可用空间。我希望防止这种行为，因为它看起来很奇怪

---

编辑：目标是使删除无缝。如果该聚焦元素是可视区域中的最后一个元素，则它肯定会向上移动，但如果它位于屏幕中间，则其上方的元素应向下移动，以便聚焦元素不会移动

必须使用CSS滚动

如下图所示：

<style>
#foo{overflow-x:scroll;
OR
overflow-y:scroll;
}
</style>

#foo{overflow-x：滚动；
或
溢出y：滚动；
}

在窗口向上移动以占用空闲空间后，将其滚动到“聚焦元素”的顶部如何

function () {
      $("#id-of-elem-to-remove").slideUp();

      var focused = $("#id-of-focused-elem");
      $("html, body").animate({
        scrollTop: focused.offset().top
      }, 1000);
    });

编辑：

---

看看这个。尝试删除“6”或“7”。

您需要获取当前滚动位置和可移动元素的高度，然后在删除元素后，将滚动位置设置为当前滚动位置减去元素高度：

function removeFoo() {
  var tempScrollTop = $(window).scrollTop();
  var ele = document.getElementById("foo");
  var height = ele.offsetHeight;
  console.log(tempScrollTop, height);
  ele.parentElement.removeChild(ele);
  $(window).scrollTop(tempScrollTop - height);
}

---

顺便说一句，我添加jquery是为了让它对我来说更快，但你明白了。此外，您的脚本在第二次尝试删除元素时无法工作，因为元素不再存在（未尝试修复它）

您必须删除吗？您不能改用hide（）函数吗？不，我想从DOM中删除元素。所以您想删除元素，但仍保留此删除元素占用的视口空间？这看起来像是奇怪的行为imho@A.Wolff我不想在视口中保留空间。如果可能的话，我希望聚焦元素的位置不会改变。我想这可能会帮助你，这也会导致元素的移动，这也是我最终想要避免的。那么你到底想要什么呢？将焦点元素保持在原处，并将下一个元素移到焦点元素的顶部？顺便说一句，你所说的“聚焦”元素是什么意思？我读了你的编辑。向下移动顶部元素会将空白区域移动到文档顶部。你到底想在这里实现什么？