动态生成输入框时.remove()方法失效且代码冗余，求解决方案

嘿，我来帮你搞定这两个头疼的问题！先说说你遇到的核心问题：remove()失效大概率是因为目标元素是动态生成的，或者选择器没精准匹配；而代码重复则是因为不同类型的输入框渲染逻辑没做封装。下面给你一套简洁的解决方案：

第一步：优化DOM结构（可选但推荐） #

给你的占位输入框加个容器，这样后续清空和添加元素会更方便：

<div id="inputContainer">
    <input class="form-control" autocomplete="off" id="dataTypeInputPlaceHolder" placeholder="请选择数据类型" />
</div>

第二步：封装渲染函数，消除代码重复 #

把不同数据类型对应的输入框渲染逻辑封装成一个函数，这样不管返回什么类型，只需要调用这个函数就行，再也不用写重复的DOM操作代码：

function renderInputByType(dataType) {
    const inputContainer = $('#inputContainer');
    
    // 先清空容器内所有元素，彻底解决remove()失效的问题
    inputContainer.empty();
    
    let inputContent = '';
    // 根据不同数据类型生成对应的输入框
    switch(dataType) {
        case 'Integer':
            inputContent = `
                <input class="form-control dynamic-input" autocomplete="off" 
                       placeholder="请输入整数" type="number" />
            `;
            break;
        case 'String':
            inputContent = `
                <input class="form-control dynamic-input" autocomplete="off" 
                       placeholder="请输入文本" type="text" />
            `;
            break;
        case 'Boolean':
            inputContent = `
                <div class="form-check">
                    <input class="form-check-input dynamic-input" type="checkbox" id="booleanInput" />
                    <label class="form-check-label" for="booleanInput">是否启用</label>
                </div>
            `;
            break;
        // 可以继续添加更多数据类型的处理逻辑
        default:
            // 默认显示初始的占位输入框
            inputContent = `
                <input class="form-control" autocomplete="off" id="dataTypeInputPlaceHolder" 
                       placeholder="请选择数据类型" />
            `;
    }
    
    // 把生成的内容添加到容器里
    inputContainer.append(inputContent);
}

第三步：修改Ajax请求，调用封装好的函数 #

另外建议把async: false改成异步（同步请求会阻塞页面，影响用户体验），然后在success回调里直接调用上面的函数：

$.ajax({
    url: '/SettingTypes/GetSettingTypeDataValidation',
    async: true, // 改用异步请求，避免页面卡顿
    data: { SettingTypeName: SettingName },
    dataType: "json",
    success: function (settingValueType) {
        // 根据返回的类型渲染对应的输入框
        renderInputByType(settingValueType);
    },
    error: function() {
        // 请求失败时，回到初始状态
        renderInputByType('default');
    }
});

为什么这样能解决问题？ #

• remove()失效的问题：用inputContainer.empty()直接清空容器内所有元素，比单独调用remove()更可靠——不管之前的元素是静态还是动态生成的，清空容器后再重新添加新元素，彻底避免了选择器匹配不到的问题。
• 代码重复问题：所有输入框的渲染逻辑都集中在renderInputByType函数里，后续要新增数据类型，只需要在switch里加一个case就行，代码更简洁、更容易维护。

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