点击增加输入框

最新推荐文章于 2023-08-11 09:27:08 发布

秤秤biubiu

最新推荐文章于 2023-08-11 09:27:08 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript input button function tags div

本文链接：https://blog.youkuaiyun.com/zoucui/article/details/2470006

js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的动态添加和删除HTML标签的功能。通过一个简单的示例展示了如何克隆节点来增加新的标签输入框，并提供了删除已添加标签的方法。适用于需要用户自定义多个标签的Web应用程序。

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

js:

function insertTag(num){
var address=document.getElementById("tag");
var i=address.childNodes.length;
if(i>num){
alert('最多可以输入4个标签！');
return;
}
var addressOld = document.getElementById("tagTemplate");
var addressNew=document.createElement("div");
addressNew=addressOld.cloneNode(true);
addressNew.style.display="inline";
addressNew.id="tag" + i;
address.appendChild(addressNew);
}

页面：

<#assign i=0>
  <#list video?if_exists.tagList?if_exists as tgl>
  <#assign i = i + 1>
  <tr>
   <td>
    标签：<input type="text" id="tags" name="videoVO.tags" value="${tgl.name}"/>
   </td>
  </tr>
  </#list>
  <#assign sum = 4>
  <#assign sum = sum - i>
  <tr>

   <td>
    <div id="tagTemplate" name="tagTemplate" style="display: none;">
    标签：<input type="text" name="videoVO.tags"/>
    <input type="button" value="删除" onclick="javascript:this.parentNode.parentNode.removeChild(this.parentNode);"/>
     <br/>
    </div>
    <div id="tag" name="tag" >
     <div><a href="javascript:insertTag(${sum});" >增加一个标签</a></div>
    </div>
   </td>
  </tr>