时间戳

首页 > 解决方案 > JQuery在一个值中查找并删除点击的id号

javascript - JQuery在一个值中查找并删除点击的id号

问题描述

我正在尝试使用 jQuery 删除输入值中单击的 ID 号。我在这里需要帮助，我对如何按照该路径删除输入值中的单击 id 感到困惑。

我会尽量简单地告诉你我想做什么。

请从 codepen.io查看这个DEMO 。在这个演示中，您可以看到那里有 4 个盒子 4 迷你黑色 div。每个黑色 div 都有自己的 id。当您单击第一个黑色 div 时<div class="del" id="1">x</div>，必须从该输入值中删除输入 1 的值，<input type="text" id="value" value="1,2,3,4">如下所示：<input type="text" id="value" value="2,3,4">使用逗号 ( ,)。我该怎么做，有人可以在这方面帮助我吗？

<div class="container">
  <div class="global_box">
    <div class="item_box" id="id1"><div class="del" id="1">x</div></div>
    <div class="item_box" id="id2"><div class="del" id="2">x</div></div>
    <div class="item_box" id="id3"><div class="del" id="3">x</div></div>
    <div class="item_box" id="id4"><div class="del" id="4">x</div></div>
    <div class="values"><input type="text" id="value" value="1,2,3,4"></div> 
  </div>
</div>

js

$(document).ready(function(){
   $("body").on("click", ".del", function(){
       // Wanted to delete id
       var ID = $(this).attr("id");

   });
});

标签： javascriptjqueryhtml

解决方案

您可以使用以下代码： 

$(document).ready(function(){
   $("body").on("click", ".del", function(){
       // Wanted to delete id
       var ID = $(this).attr("id");
       var input = $('#value');
           input.val(function(_, value){
       return value.split(',').filter(function(val){ // split the value
         return val !== ID; // filter to return other values
       }).join(','); // join them to create a new string.
    });
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="global_box">
    <div class="item_box" id="id1"><div class="del" id="1">x</div></div>
    <div class="item_box" id="id2"><div class="del" id="2">x</div></div>
    <div class="item_box" id="id3"><div class="del" id="3">x</div></div>
    <div class="item_box" id="id4"><div class="del" id="4">x</div></div>
    <div class="values"><input type="text" id="value" value="1,2,3,4"></div> 
  </div>
</div>

推荐阅读