删除datalist下的option

最新推荐文章于 2026-03-29 04:34:25 发布

原创最新推荐文章于 2026-03-29 04:34:25 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

HTML/JavaScript 专栏收录该内容

3 篇文章

订阅专栏

这篇博客记录了如何从HTML datalist元素中删除option的方法，引用自Stack Overflow的解决方案。提供了HTML和JavaScript代码示例，可以直接运行。

在Stack Overflow上看到的方法，记录一下

html：

<input class="form-control" id="test" type="text" list="test_list">
	<datalist id="test_list">
		<option value="1"></option>
		<option value="2"></option>
		<option value="3"></option>
	</datalist>
<button onclick="deleteOne()">从尾部删除一个元素</button>

js代码：

<script>
        function deleteOne() {
            // 这是尾删，如果想删除任一位置，只需要修改索引位置即可
			
			// 原生JS写法
            // var parent = document.getElementById('test_list')
            // var childArray = parent.children
            // var t_len = childArray.length
            // console.log(t_len)
            // if (t_len > 0){
            //     t_len-- //索引位置从0开始
            //     parent.removeChild(childArray[t_len])
            // }

            // 如果采用jquery的方法，则需要进行一些变动
            var parent = $("#test_list")[0]  //取datalist作为父级元素
            var childArray = parent.children
            var t_len = childArray.length  //option的个数
            if(t_len > 0) { //还有option可删
                t_len--
                parent.removeChild(childArray[t_len])
            }

            // 如果想全部清空，只需要将if改为while 然后以option的个数作为循环条件，当其大于零时执行删除操作即可
            // while (t_len > 0){
            //     t_len--;
            //     parent.removeChild(childArray[t_len])
            // }
        }
    </script>

完整可直接运行代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>删除datalist下的option</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script>
        function deleteOne() {
            // 这是尾删，如果想删除任一位置，只需要修改索引位置即可

            // var parent = document.getElementById('test_list')
            // var childArray = parent.children
            // var t_len = childArray.length
            // console.log(t_len)
            // if (t_len > 0){
            //     t_len-- //索引位置从0开始
            //     parent.removeChild(childArray[t_len])
            // }

            // 上例如果采用jquery的方法，则需要进行一些变动
            var parent = $("#test_list")[0]  //取datalist作为父级元素
            var childArray = parent.children
            var t_len = childArray.length  //option的个数
            if(t_len > 0) { //还有option可删
                t_len--
                parent.removeChild(childArray[t_len])
            }

            // 如果想全部清空，只需要将if改为while 然后以option的个数作为循环条件，当其大于零时执行删除操作即可
            // while (t_len > 0){
            //     t_len--;
            //     parent.removeChild(childArray[t_len])
            // }
        }
    </script>
    <input class="form-control" id="test" type="text" list="test_list">
        <datalist id="test_list">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
        </datalist>
    <button onclick="deleteOne()">从尾部删除一个元素</button>
</body>
</html>