Javascript动态下拉列表我也可以在按钮中看到它答案

【问题标题】：Javascript dynamic dropdown I can see it in the button alsoJavascript动态下拉列表我也可以在按钮中看到它
【发布时间】：2020-03-19 17:14:01
【问题描述】：

我正在动态创建开始和结束时间下拉字段。我的应用程序中还有一个删除链接文件。但是当我使用'tab'键时，我也可以看到删除按钮中的下拉菜单。我应该如何避免删除按钮中的下拉菜单。我应该如何摆脱删除按钮中的时间选择器下拉菜单

我的脚本是

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        id="bootstrap-css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div>
            <input class="btn btn-link" onclick="addtextbox()" type="button" value="Add">
        </div>
        <div id="ToolsGroup">
        </div>




    </div>
<script>
    var count = 0;
    function addtextbox() {
        var newTextBoxDiv = document.createElement('div');
        newTextBoxDiv.id = 'Tools';
        document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);

        newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group"><label class="col-md-4 control-label" for="starttime">Start&nbsp;time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dstarttime' + count + '" placeholder="starttime" required> </div></div>' +
            '<div class="form-group"><label class="col-md-4 control-label" for="endtime">End&nbsp;time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dendtime' + count + '" placeholder="endtime"></div></div>' +
            '<input type="button" value="Remove" class="reomvetools" onclick="removeTextArea(this);"></div><div id="dresultDiv' + count + '"></div></form>'
        count++;
        $('#Tools input').timepicker({
       timeFormat: 'HH:mm',
       interval: 30,
       use24hours: true,
       scrollbar: true,
   });
    };

    function removeTextArea(inputElement) {
        var el = inputElement;
        while (el.tagName != 'DIV') el = el.parentElement;
        el.parentElement.removeChild(el);
        counter--;
    }

</script>

</body>
</html>

我尝试使用 ("#form -group").timpicker 而不是 ("#tools input").timepicker ，但这不起作用。我尝试将删除按钮类更改为 'btn btn-link' 。那没有用。我该怎么做？如果我使用鼠标，我看不到“删除”按钮中的时间下拉菜单。如果我使用选项卡，我会看到下拉菜单。有人可以帮我摆脱删除按钮中的下拉菜单吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

只需为时间明确定义输入类型就可以了

$('#Tools input[type=time]').timepicker({
   timeFormat: 'HH:mm',
   interval: 30,
   use24hours: true,
   scrollbar: true,
});

【讨论】：