在js中添加和删除html

html

<ul style="list-style-type:upper-latin;" id="fm1">
         <li>
                 <input type="text" name="content" />
                 <button onClick="dd(this)" style='background:none;outline: none;box-shadow: none;'>
                    删除
                 </button>
         </li>
  </ul>

<button type="button" onclick="addText();" style="background:none;outline: none;box-shadow: none;">
    下一项
</button>

 

   

 <script>

function addText()
{
    //使用innerHTML，会把标签中的其它标签去掉，使用+=解决，但是input 标签的实时输入内容没有保存
    /*
      document.getElementById("fm1").innerHTML+="<li><input type='text' name='content'> 
       <button id='buttony' onClick='dd(this)' style='padding:0px;font-size:20px;margin-
       left:20px; background:none;outline: none;box-shadow: none;'>删除</button></li>";   
    */        
    //append解决什么的问题
    $("#fm1").append("<li><input type='text' name='content'><button id='buttony'  
     onClick='dd(this)' style='padding:0px;font-size:20px;margin-left:20px; 
     background:none;outline: none;box-shadow: none;'>删除</button></li>"); 
}

function dd(c){
            //删除上一级标签，这里是li标签; parentNode:上一级
            c.parentNode.remove();
}  

//隐藏<li>中的第一个button删除按钮
$(function(){
            $("ul li button").first().css("display","none");
 });

    </script>