Remove Sibling 正在删除 jquery 中的额外元素

Question

这是我的作品之一 html

<label class="checkbox" data-appid="1" data-moduleid="1" data-permissionid="128" data-processid="1" data-screenid="1">
  <input type="checkbox" name="screen_permission_id[128]" value="128" checked="checked">
  <span></span>
  Add

这是我的 jquery 代码

$(document).on('change', 'input:checkbox', function() {
   console.log($(this))
    if ($(this).is(':checked') == false) {
        $(this).siblings($('input[type=hidden]')).remove()
    } else {
        let tr = $(this).closest('label');

        let appid = tr.attr("data-appid")
        let moduleid = tr.attr("data-moduleid")
        let permissionid = tr.attr("data-permissionid")
        let processid = tr.attr("data-processid")
        let screenid = tr.attr("data-screenid")

        $(this).closest('label').append('<input type="hidden" name="app_module_id[' + permissionid + ']" value="' + moduleid + '"> <input type="hidden" name="module_process_id[' + permissionid + ']" value="' + processid + '"><input type="hidden" name="process_screen_id[' + permissionid + ']" value="' + screenid + '">')
    }



})

当我取消选中复选框时。除了隐藏的输入，它还会删除我的 span 变量。我怎样才能避免这种情况。

Answer 1

您可以使用 not 选择兄弟姐妹，如 jquery doc 中所述。

$(this).siblings($('input[type=hidden]')).not("span").remove()

$(document).on('change', 'input:checkbox', function() {
    if ($(this).prop('checked') == false) {
        $(this).siblings($('input[type=hidden]')).not("span").remove()
        console.clear();
    } else {
        let tr = $(this).closest('label');

        let appid = tr.attr("data-appid")
        let moduleid = tr.attr("data-moduleid")
        let permissionid = tr.attr("data-permissionid")
        let processid = tr.attr("data-processid")
        let screenid = tr.attr("data-screenid")

        $(this).closest('label').append('<input type="hidden" name="app_module_id[' + permissionid + ']" value="' + moduleid + '"> <input type="hidden" name="module_process_id[' + permissionid + ']" value="' + processid + '"><input type="hidden" name="process_screen_id[' + permissionid + ']" value="' + screenid + '">')
        console.log('<input type="hidden" name="app_module_id[' + permissionid + ']" value="' + moduleid + '"> <input type="hidden" name="module_process_id[' + permissionid + ']" value="' + processid + '"><input type="hidden" name="process_screen_id[' + permissionid + ']" value="' + screenid + '">')
    }



})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox" data-appid="1" data-moduleid="1" data-permissionid="128" data-processid="1" data-screenid="1">
      <input type="checkbox" name="screen_permission_id[128]" value="128" checked="checked">
      <span>Add</span>

Remove Sibling 正在删除 jquery 中的额外元素

Remove Sibling is removing extra elements in jquery

jquery

metronic