如何实现点击元素克隆到指定div并支持点击移除与localStorage状态存储

你原有代码的错误在于循环克隆的是整个.top-items容器，而不是克隆被点击选中的单个.mix元素，同时也没有处理克隆元素的点击移除逻辑，以及状态同步的问题。

实现思路 #

• 点击原始元素时判断选中状态，选中则克隆元素追加到.all-items容器，取消选中则移除.all-items内对应data-id的元素
• 用事件委托给.all-items内的克隆元素绑定点击移除事件，移除时同步更新原始元素的选中状态和localStorage存储
• 页面初始化时，读取localStorage的已选状态，自动把已选中的元素克隆到目标容器，保证刷新页面后状态一致

完整实现代码 #

$(function() {
  // 克隆选中元素到目标容器的公共方法
  function cloneToTarget($el) {
    const elementId = $el.data('id')
    // 校验避免同一个元素重复克隆
    if ($(`.all-items [data-id="${elementId}"]`).length) return
    // 克隆元素，无需保留原始元素的点击事件
    const $cloneElement = $el.clone().removeClass('selected')
    $('.all-items').append($cloneElement)
  }

  // 从目标容器移除对应元素的公共方法
  function removeFromTarget(elementId) {
    $(`.all-items [data-id="${elementId}"]`).remove()
  }

  // 绑定原始元素的点击选中事件
  $('.mix').click(function() {
    const $currentEl = $(this)
    const elementId = $currentEl.data('id')
    const isSelected = !$currentEl.hasClass('selected')
    // 切换选中样式
    $currentEl.toggleClass('selected')
    // 更新localStorage存储
    window.localStorage.setItem('test' + elementId, isSelected)
    // 同步到目标容器
    isSelected ? cloneToTarget($currentEl) : removeFromTarget(elementId)
  })

  // 绑定目标容器内克隆元素的点击移除事件，事件委托兼容动态添加的元素
  $('.all-items').on('click', '.box', function() {
    const elementId = $(this).data('id')
    // 移除当前点击的克隆元素
    $(this).remove()
    // 同步更新原始元素的选中状态和localStorage
    $(`.top-items [data-id="${elementId}"]`).removeClass('selected')
    window.localStorage.setItem('test' + elementId, false)
  })

  // 页面初始化时同步历史选中状态
  $('.mix').each(function() {
    const $currentEl = $(this)
    const elementId = $currentEl.data('id')
    const storageKey = 'test' + elementId
    const isSelected = localStorage.getItem(storageKey) === "true"
    if (isSelected) {
      $currentEl.addClass('selected')
      cloneToTarget($currentEl)
    }
  })
})

你的原有HTML代码无需修改，直接使用即可。

说明 #

• 所有操作都会同步更新localStorage存储、原始元素选中状态、目标容器元素三个维度的状态，不会出现状态不一致的问题
• 用事件委托绑定克隆元素的点击事件，不需要每次克隆元素后重新绑定事件，性能更高
• 加了重复克隆校验，避免同一个元素被多次添加到目标容器

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