如何往一个元素添加子元素，但是要限制子元素的个数只能是3，超出就不能再添加,代码如下

Question

html

        <div class="form-group">
            <label>职位选择</label>
            <div class="_people">
                <p class="_listBox">

                </p>
                <label>点击筛选</label>
                <div id="_people">
                    <span class="x" style="display: none"></span>
                    <button class="btn">电气工程师</button>
                    <button class="btn">机械工程师</button>
                    <button class="btn">PLC工程师</button>
                    <button class="btn">钳工</button>
                    <button class="btn">车工</button>
                    <button class="btn">冼工</button>
                    <button class="btn">焊工</button>
                </div>
            </div>
            <input type="text" class="form-control"/>
        </div>
        

css

    ._listBox{
        height: 50px;
        /*width: 400px;*/
        overflow: hidden;
        margin: 20px 0;
        border: 2px solid #bbb;
    }
    .listItem {
        margin: 5px 10px 5px 10px;
    }
    #_people{
        margin: 20px 0;
    }

js

    $(function(){
        $('#_people .btn').click(function(){
            var btn1html = $(this).html();
            console.log(btn1html);
            var newbtn = document.createElement("span");
            newbtn.setAttribute('class', 'listItem btn');
            console.log(newbtn);
            newbtn.innerHTML = btn1html + ' '+ 'x';
            $('._listBox').append(newbtn);

            $('.listItem').click(function(){
                $(this).remove();
            })
        })
    })

Answer 1

https://jsfiddle.net/zmh9cyoc/2/

加一个判断函数即可： 加注释的两行是我给你改的代码

    $(function () {
        $('#_people .btn').click(function () {
            var btn1html = $(this).html();
            var newbtn = document.createElement("span");
            newbtn.setAttribute('class', 'listItem btn');
            newbtn.innerHTML = btn1html + ' ' + 'x';
            // 按照条件增加子元素 检查是否满足条件
            (checkSubCount() && !checkSubExist(btn1html)) ? $('._listBox').append(newbtn) : false;
            $('.listItem').click(function () {
                $(this).remove();
            })
        });
        // 判断子元素格式
        function checkSubCount() {
            return $("._listBox").children().length >= 3 ? false : true;
        }
        // 判断子元素是否已经被添加 true 是 false 没有
        function checkSubExist(sub) {
            return $("._listBox").html().indexOf(sub) ==-1 ? false : true;
        }
    })

Answer 2

 $(function(){
        $('#_people .btn').click(function(){
            var btn1html = $(this).html();
            console.log(btn1html);
            var newbtn = document.createElement("span");
            newbtn.setAttribute('class', 'listItem btn');
            console.log(newbtn);
            newbtn.innerHTML = btn1html + ' '+ 'x';
                      var length = $("._listBox .listItem").length;//获取已经添加的数量
                      if(length >= 3){//超过3个不能添加
                              return;
                       }
            $('._listBox').append(newbtn);

            $('.listItem').click(function(){
                $(this).remove();
            })
        })
    })

你这段代码还有一个问题，一个职位应该不可以重复添加，你自己加下判断下就可以了。

Answer 3

在点击添加前 判断一下

if($('._listBox>span').length>3){
    //超过三个
    alert("抱歉，已超过三个，不能继续添加")
}else{
    //放你的添加代码
}

Answer 4

设置一个变量用于保存点击的次数，当次数大于3的时候，触发点击标签的事件的时候直接return，或者在这个条件下给个提示。