在js中添加和删除html

最新推荐文章于 2024-11-09 13:53:01 发布

原创最新推荐文章于 2024-11-09 13:53:01 发布 · 4.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

js 同时被 2 个专栏收录

15 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文介绍如何利用HTML和JavaScript创建一个动态表单，该表单可以根据用户操作增删表单项。通过JavaScript动态生成HTML元素，实现了表单的灵活交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>