文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >要删除在Datalist中输入的值的单个按钮

问要删除在Datalist中输入的值的单个按钮
EN

Stack Overflow用户
提问于 2016-08-25 04:50:06
回答 2查看 55关注 0票数 0

我有一个数据表，它将包含大量的选项。我已经创建了一个脚本，当在数据列表中输入一个新值时，它会显示在HTML旁边的一个"Remove“按钮中，我不知道如何使它具有功能。

我希望在两件事上提供帮助: 1)使“删除”按钮具有功能，以便删除单个条目。2)加载页面时，从带有id="savedvalues“的元素中获取逗号分隔列表(如果有的话)，并创建"Remove”按钮结构。

代码语言：javascript
复制
<script>
$(document).ready(function(){

var BrowserList =[];

//When the Add Button is clicked...
$("#button").click(function(){
var selected = $("#datalistID").val();

if(selected === ''){
//Do nothing
} 
else {
BrowserList[BrowserList.length] = selected;
}

//Output the results
var EntriesAndButtons = '<ul>';
var Entries = '';
for(var i=0; i< BrowserList.length; i++) {

EntriesAndButtons += "<li>" + BrowserList[i] + " " + '<input type="button" id="removebutton" value="Remove" /></li>';
Entries += BrowserList[i] + ", ";
}

//After the loop finish the results
EntriesAndButtons += '</ul>';
CleanedEntries = Entries.slice(0,-2); //Remove the space and comma
//After the loop output the results.
$('#thelist').html(EntriesAndButtons);
$("#savedvalues").val(CleanedEntries);
});

});
</script>

<body>
Select your Test Spec:
<input list="browsers" id="datalistID">
<datalist id="browsers">
<option value="ASTM B117"></option>
<option value="ASTM B368"></option>
<option value="ASTM B467"></option>
<option value="ASTM B469"></option>
<option value="ASTM C234"></option>
<option value="ASTM C317"></option>
<option value="ASTM C456"></option>
<option value="ASTM C657"></option>
<option value="ASTM D211"></option>
<option value="ASTM D233"></option>
<option value="ASTM D334"></option>
<option value="ASTM D345"></option>
<option value="ASTM D467"></option>
<option value="ASTM D469"></option>
<option value="ASTM E234"></option>
</datalist>
<input id="button" type="button" value="Add">

<br><br>You've selected:
<p id="thelist"></p>

<br>
This text field is where the values should be stored:
<input type="text" id="savedvalues" name="browservalues" value="Chrome">
</body>

https://jsfiddle.net/q354797e/8/

jquery
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-25 05:00:16

  • 阅读有关Event delegation的信息，以便在动态元素上附加事件。
  • 迭代所有ULPARENT li元素以获得所有li元素textContent
  • 使用Array#join以glue作为,连接数组元素

​

代码语言：javascript
复制
$(document).ready(function() {
  var BrowserList = [];
  $("#button").click(function() {
    var selected = $("#datalistID").val();
    if (selected !== '') {
      BrowserList.push(selected);
    }
    var EntriesAndButtons = '<ul id="ulParent">';
    var Entries = '';
    for (var i = 0; i < BrowserList.length; i++) {

      EntriesAndButtons += "<li>" + BrowserList[i] + " " + '<input type="button" class="removebutton" value="Remove" /></li>';
      Entries += BrowserList[i] + ", ";
    }
    EntriesAndButtons += '</ul>';
    CleanedEntries = Entries.slice(0, -2);
    $('#thelist').html(EntriesAndButtons);
    $("#savedvalues").val(CleanedEntries);
    $("#datalistID").val('');
  });
  $('#thelist').on('click', '.removebutton', function() {
    $(this).closest('li').remove();
    var val = [];
    BrowserList = [];
    $('#ulParent li').each(function() {
      val.push(this.textContent);
      BrowserList.push(this.textContent);
    });
    $("#savedvalues").val(val.join(', '));
  });
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Select your Test Spec:
<input list="browsers" id="datalistID">
<datalist id="browsers">
  <option value="ASTM B117"></option>
  <option value="ASTM B368"></option>
  <option value="ASTM B467"></option>
  <option value="ASTM B469"></option>
  <option value="ASTM C234"></option>
  <option value="ASTM C317"></option>
  <option value="ASTM C456"></option>
  <option value="ASTM C657"></option>
  <option value="ASTM D211"></option>
  <option value="ASTM D233"></option>
  <option value="ASTM D334"></option>
  <option value="ASTM D345"></option>
  <option value="ASTM D467"></option>
  <option value="ASTM D469"></option>
  <option value="ASTM E234"></option>
</datalist>
<input id="button" type="button" value="Add">

<br>
<br>You've selected:
<p id="thelist"></p>

<br>This text field is where the values should be stored:
<input type="text" id="savedvalues" name="browservalues" value="Chrome">

​

票数 0
EN

Stack Overflow用户

发布于 2016-08-25 16:05:51

这个完整的答案发布在下面，但实际上，这是Rayon通过几个小改动发布的代码。

代码语言：javascript
复制
<script>
$(document).ready(function() {

  //Check to see if there are any existing values
  var priorValues = $("#savedvalues").val();
  //console.log ("priorvalues is: ", priorValues);
  if (priorValues !== ''){
      //Create an array by splitting the list by comma
    var BrowserList = $('#savedvalues').val().split(",");
        createHTML();
  } else {
  var BrowserList = '';
  }

  $("#button").click(function() {
    var selected = $("#datalistID").val();
    if (selected !== '') {
      BrowserList.push(selected);
    }
    createHTML();
});
  $('#thelist').on('click', '.removebutton', function() {
    $(this).closest('li').remove();
    var val = [];
    BrowserList = [];
    $('#ulParent li').each(function() {
      val.push($.trim(this.textContent));
      BrowserList.push(this.textContent);
    //console.log ("The BrowserList value is: ", BrowserList);
    });
    $("#savedvalues").val(val.join(', '));
  });

//This function creates the HTML for the list and buttons.
function createHTML() {
   var EntriesAndButtons = '<ul id="ulParent">';
    var Entries = '';
    for (var i = 0; i < BrowserList.length; i++) {

      EntriesAndButtons += "<li>" + $.trim(BrowserList[i]) + '  <input type="button" class="removebutton" value="Remove" /></li>';

      //Trim
      Entries += $.trim(BrowserList[i]) + ", ";
    console.log ("The BrowserList value is: ", $.trim(BrowserList[i]));
    }
    EntriesAndButtons += '</ul>';
    CleanedEntries = Entries.slice(0, -2);
    $('#thelist').html(EntriesAndButtons);
    $("#savedvalues").val(CleanedEntries);
    $("#datalistID").val('');
}

});
</script>

Select your Test Spec:
<input list="browsers" id="datalistID">
<datalist id="browsers">
<option value="ASTM B117"></option>
<option value="ASTM B368"></option>
<option value="ASTM B467"></option>
<option value="ASTM B469"></option>
<option value="ASTM C234"></option>
<option value="ASTM C317"></option>
<option value="ASTM C456"></option>
<option value="ASTM C657"></option>
<option value="ASTM D211"></option>
<option value="ASTM D233"></option>
<option value="ASTM D334"></option>
<option value="ASTM D345"></option>
<option value="ASTM D467"></option>
<option value="ASTM D469"></option>
<option value="ASTM E234"></option>
</datalist>
<input id="button" type="button" value="Add">

<br><br>You've selected:
<p id="thelist"></p>

<br>
This text field is where the values should be stored:
<input type="text" id="savedvalues" name="browservalues" value="cats, dogs, horses, pigs" >

https://jsfiddle.net/q354797e/15/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39136872

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档