jQuery中prev().remove()无法删除元素前一同级节点问题求解

• 核心是动态生成元素的事件绑定失效：你代码里直接用$('.crossSign').on('click', ...)这类写法，只会给页面初始加载时就存在的.crossSign和a标签绑定事件，后续通过表单提交动态append到页面里的元素不会被绑定事件，所以点击新添加的删除按钮自然没有反应。
• 次要逻辑问题：你给.crossSign本身绑定了mouseout隐藏的逻辑，会出现鼠标刚移到删除按钮上，就触发a标签的mouseout事件把按钮隐藏，交互体验异常。

把所有针对动态元素的事件绑定改成事件委托的写法，绑定到始终存在的父级容器（比如你代码里的$list对应的节点，也就是HTML里的#list-div）上即可，修改后的完整代码如下：

$newform.on('submit', function(e) {
  e.preventDefault();
  var text = $newform.find('input:text').val();
  var url = document.getElementById('addurl').value;
  $list.append('<a href="' + url + '"><li class="links"><span>' + text + '</span></li></a><div class="crossSign"><div class="line1"></div><div class="line2"></div></div>');
  $newform.find('input:text').val('');
  $addurl.val('');
});

$('#close-form').on('click', function() {
  $newform.hide();
  $newlinks.show();
});

// 事件委托绑定删除逻辑，兼容动态新增的元素
$list.on('click', '.crossSign', function() {
  $(this).prev().remove();
  $(this).remove();
});

// 仅保留a标签的hover触发删除按钮显示隐藏，删除crossSign本身的hover绑定避免冲突
$list.on('mouseover', 'a', function() {
  $(this).next().show();
});

$list.on('mouseout', 'a', function() {
  $(this).next().hide();
});

你也可以把每组a标签+crossSign按钮用一个公共父容器包裹，删除的时候直接移除整个父容器即可，不需要分别操作两个节点，代码更简洁容错性更高：

// 提交表单新增节点时包裹公共父层
$list.append('<div class="link-group"><a href="' + url + '"><li class="links"><span>' + text + '</span></li></a><div class="crossSign"><div class="line1"></div><div class="line2"></div></div></div>');

// 删除时直接移除父层
$list.on('click', '.crossSign', function() {
  $(this).closest('.link-group').remove();
});

内容的提问来源于stack exchange，提问作者Sahil Handique