5-js动态添加或移除元素-多个搜索条件联动案例记录

前提条件（需求）：初始化一个下拉框+搜索框，点击添加搜索条件，新增一个下拉框+搜索框和移除按钮，同时第一个下拉框+搜索框需要新增一个且或选择框和移除按钮，点击移除按钮，移除对应下拉框+搜索框及且或选择框（目前只考虑两个搜索条件示例）

过程：考虑到可能会频繁出现移除新增的情况，即使只有两个搜索条件，也不能直接使用展示隐藏形式，这样用户体验不好，所以考虑动态操作

首先，初始化是固定一个下拉框+搜索框，考虑各种操作情况

1、点击添加条件，第一个搜索条件新增且或选择框及移除按钮，然后再新增一个下拉框+搜索框及移除按钮，添加条件按钮隐藏

2-1、点击第一个移除按钮，第一个搜索条件、且或选择框及第一个移除按钮移除，第二个搜索条件上位，添加条件按钮展示

2-2、点击第二个移除按钮，第二个搜索条件、且或选择框及第二个移除按钮移除，添加条件按钮展示

3、再次点击添加条件，后续操作重复1、2步骤

先实现第一步：

第一步，首先需要新增且或选择框，第一次采用的方法是使用appendTo直接添加Html

var html = 
'<div class="AndOr">' +
    '<select name="AndOrType" id="AndOrType" class="layui-select" lay-filter="showAndOr" >' +
    '<option value="and">且</option>' +
    '<option value="or">或</option>' +
    '</select></div>' +
    '<button type="button" class="layui-btn layui-btn-primary delete" id="delete1" >' +
        '<i class="layui-icon layui-icon-delete"></i></button>'
$(html).appendTo(".Search")

结果发现只展示了移除按钮，选择框并没有出现，F12查看元素，发现该元素的display是none，但是我加了style="display:none"后，选择框的样式却不是layui的样式。

此法不通，换一个！使用<script type="text/html">模板

<script type="text/html" id="AndOrHtml">
  <div class="AndOr" >
       <select name="AndOrType" id="AndOrType" class="layui-select" lay-filter="showAndOr">
           <option value="and">且</option>
           <option value="or">或</option>
       </select>
   </div>
   <button type="button" class="layui-btn layui-btn-primary delete" id="{{'delete'+d}}"><i
                class="layui-icon layui-icon-delete"></i></button>
</script>

 结果还是不展示，后来我发现使用layui框架的select和原生的select，在源代码中是有差别，layui框架下的select是还包括其他元素一起封装的。

当我尝试将多出来的代码直接粘贴使用时，结果是样式对了一点点，但无法选择了（是有点无用的尝试了）

后续找到了解决方法，在 Layui 中，表单元素（如 select、checkbox、radio 等）通常会有一些与它们相关联的行为或样式，这些是在页面加载时通过 Layui 的初始化代码来绑定的。动态添加的元素由于是在页面加载之后添加到 DOM 中的，所以它们不会自动获得这些绑定，就需要使用form.render()重新渲染。

form.render('select');

这下就对味了，估计上述直接添加html不展示的问题也可以使用这个解决（如图2，尝试了一下，确实是可以实现的，只是样式需要调整一下） 

最后还是选择采用<script type="text/html">这种方式，同理新增第二个搜索条件

第二步，移除元素，<script type="text/html">中的元素可直接使用remove()方法进行移除

为方便移除元素，搜索条件、移除按钮可用相同的类名识别，移除点击事件写在laytpl().render()的回调中，方便追踪对应搜索条件的位置下标

具体编码如下：

var optionId = 1//定义变量指明搜索条件和移除按钮的位置下标
$('.addSearch').click(function () {
    //新增且或搜索框
    var getTpl = AndOrHtml.innerHTML
    laytpl(getTpl).render(optionId, function (html) {
        $('.Search').after(html);//在输入框后新增且或选择框
        var index = optionId//记录当前位置
        optionId++ //新增后位置下标+1，用于指明第二个搜索条件的位置下标
        form.render('select');
        $(`#delete${index}`).click(function (e) {
             $('.AndOr').remove()//移除且或选择框
             $('.delete').remove()//移除“移除按钮”
             $(`#viewS${index}`).remove()//移除第一个搜索条件
             $('.addSearch').css('display', 'block')//点击移除后展示添加条件按钮
             optionId = index + 1 //移除后变量需变成第二个搜索条件的位置下标
        })
    });

    //新增第二个搜索条件
    var getTpl2 = viewS2Html.innerHTML
    laytpl(getTpl2).render(optionId, function (html) {
        var index = optionId//记录当前位置
        $(`#viewS${index - 1}`).after(html);//在第一个搜索条件后新增第二个搜索条件
        $('.addSearch').css('display', 'none')//隐藏添加条件按钮
        form.render('select');
        $(`#delete${index}`).click(function (e) {
            $('.AndOr').remove()
            $('.delete').remove()
            $(`#viewS${index}`).remove()//移除第二个搜索条件
            $('.addSearch').css('display', 'block')//点击移除后展示添加条件按钮
            optionId = index - 1//移除后变量需变成第一个搜索条件的位置下标
        })
    });
})

坚持就是胜利！