Question

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

我会试着告诉你我想做什么。

请从codepen.io查看此 DEMO 。在这个演示中你可以看到那里有4个盒子4迷你黑色div。每个黑色div都有自己的id。当您点击第一个黑色div <div class="del" id="1">x</div>时，必须从此输入值<input type="text" id="value" value="1,2,3,4">中删除输入1的值，如下所示：<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");

   });
});

Answer 1

您可以使用此代码：

$(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>

Answer 2

目前您正在选择body元素，您想要选择del元素。之后，您可以获取ID值，替换为空字符串，然后使用Regex替换开头和结尾的逗号。代码如下：

$(document).ready(function(){
   $(".del").on("click", function(){
       // Wanted to delete id
     var newValue =  $("#value").val().replace($(this).attr("id"), "");
     $("#value").val( newValue.replace(/^,/, "").replace(/,$/, "") );
   });
});

JQuery在值中查找并删除单击的id号

2 个答案: