Question

我输入了以下一些值：

HTML

<input id="input_post_id" type="hidden" name="varPostId" value="29644,29650,63186,99616,101647">

在单击时，我检查单击的按钮data attribute是否具有number input中的.val()，如果是，则将其删除：

JS

$(".removeJiku").on("click", function(){
  var removeThisId = $(".removeId").attr("data-thisPostId"); 
  $("#input_post_id").val($("#input_post_id").val().replace(removeThisId,''));
});

但是上面的js并没有删除该号码。 Button是：

<button data-thispostid="101647" type="button" class="removeJiku">Remove</button>

注意：

我也需要删除number及其comma

Answer 1

$(".removeId")不是您的按钮。相反，您应该编写$(this)，如下面的工作代码所示。

另外，您替换值的方式将在其中保留一个,，而以其他方式进行替换。将值用,分割，然后将其删除（如果存在），然后再用,加入它们。

$(".removeJiku").on("click", function(){
  var removeThisId = $(this).attr("data-thisPostId");
  var postIds = $("#input_post_id").val();
  if(removeThisId && postIds){
    postIds = postIds.split(",");
  
    if(postIds.indexOf(removeThisId) > -1){
      postIds.splice(postIds.indexOf(removeThisId), 1);
    }
     $("#input_post_id").val(postIds.join(","));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input_post_id" type="hidden" name="varPostId" value="29644,29650,63186,99616,101647"/>
<button data-thispostid="101647" type="button" class="removeJiku">Remove</button>

Answer 2

正如我在评论中提到的那样，按钮的选择器是错误的，因此您没有获取属性。您可以只使用$(this)。

要删除逗号，可以使用.split(",")将逗号分隔的值转换为数组，使用.filter()从数组中删除ID，然后与{{ 1}}。

.join(",")

$(".removeJiku").on("click", function() {
  var removeThisId = $(this).attr("data-thisPostId");
  var $input = $("#input_post_id");

  console.log("BEFORE:", $input.val()); //For demo purposes

  var vals = $input.val().split(",").filter(item => item !== removeThisId).join(",");
  $input.val(vals);

  console.log("AFTER:", vals); //For demo purposes
});

Answer 3

replace()将替换字符串中子字符串的出现，仅替换值的第一个实例。

filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。

split()方法通过使用指定的分隔符字符串确定将每个字符串拆分到何处，将字符串对象拆分为子字符串，从而将String对象拆分为字符串数组。

join()方法将数组（或类似数组的对象）的所有元素连接到字符串中并返回此字符串。

   

 $(".removeJiku").on("click", function(){
      var removeThisId = $(".removeId").attr("data-thisPostId"); 
      var inputVal = $("#input_post_id").val();
    
    inputVal = inputVal.replace(removeThisId,"");

    inputVal = inputVal.split(",").filter(Number).join(",");

      $("#input_post_id").val(inputVal);
      console.log($("#input_post_id").val());
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<button data-thispostid="101647" type="button" class="removeJiku removeId">Remove</button>

<input id="input_post_id" type="hidden" name="varPostId" value="29644,29650,101647,63186,99616">

Answer 4

您可以从隐藏字段下方删除该值

<input id="input_post_id" type="hidden" name="varPostId" value="29644,29650,63186,99616,101647">

通过使用以下代码

$(".removeJiku").on("click", function(){
  var removeThisId = $(this).attr("data-thisPostId"); 

  $("#input_post_id").val($("#input_post_id").val().replace(removeThisId,'').replace(/,\s*$/, ""));

});

在您的代码中，我只需替换下面的行

var removeThisId = $(".removeId").attr("data-thisPostId");

收件人

var removeThisId = $(this).attr("data-thisPostId");

您的代码的问题是类.removeId在您的代码中不可用或该类不可访问。您可以检查控制台removeThisId的值以调试代码或使用任何浏览器调试工具

如何从输入值中删除数字？

4 个答案: