1、樣式

 * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 600px;
        height: 300px;
        ;
        border: 1px solid rgb(0, 0, 0);
        margin-bottom: 20px;
        margin-left: 20px;
        margin-top: 40px;
        overflow: hidden;
        overflow: scroll;

    }

    #box>ul>li {
        list-style: none;
    }

    #text {
        width: 600px;
        height: 200px;
        border: 1px solid rgb(0, 179, 155);
        outline: none;
        margin-left: 20px;
    }

    button {
        width: 600px;
        height: 40px;
        background: rgb(1, 194, 168);
        color: #fff;
        outline: none;
        margin-left: 20px;
        display: block;
    }

    #box>#uls>li>button {
        width: 50px;
        height: 25px;
        float: right;
        margin-right: 10px;
        margin-top: 4px;
        border: none;
        background: red;
    }

    #box>#uls>li {
        height: 30px;
        display: block;
    }

2、html內(nèi)容

 <div id="box">
    <ul id="uls"></ul>
</div>


<textarea name="" id="text" cols="30" rows="10"></textarea>

<button id="btn" onclick="butt()">發(fā)布</button>

3、js實(shí)現(xiàn)

 //解決命名
function $(name) {
        return document.getElementById(name);
}
    var box = $('box');
    var text = $('text');
    var btn = $('btn');
    var uls = $('uls')

    if(text.value == ''){
        bth.disabled = true;
    }else{
        bth.disabled = false;
    }

//點(diǎn)擊button獲取text輸入的內(nèi)容
function butt() {
// btn.disabled = true;    //將按鈕禁用，如果寫在butt點(diǎn)擊事件里面的話點(diǎn)擊一次才能禁用；
    var texthq = text.value;  //將文本框輸入的內(nèi)容賦值給texthq；
    var ul_li = document.createElement('li');  //新建一個li
    var span = document.createElement('span');  //新建一個span
    span.innerText = texthq;  //將文本內(nèi)容插入到span里
    ul_li.appendChild(span);  //將span插入到li里
    uls.appendChild(ul_li);   //將li插入到ul里


    text.value = "";    //執(zhí)行完一次給text文本域清空
    var del = document.createElement('button');  //新建一個button按鈕
    del.innerText = '刪除';  //將刪除寫入到del中
    ul_li.appendChild(del);  //將button插入到li里面

    uls.onclick = function () {  //綁定事件，綁定到button的父級元素上面
        if (event.target.nodeName == 'BUTTON') {  //確定需要綁定的子元素
            event.target.parentNode.style = 'display:none'   //如果是button就點(diǎn)擊button隱藏父級元素
        }
    }
}