How can I get my input button w/o removing the svg?-CodePudding

hello I'm trying to create my input buttons for a card, but I can't seem to get my buttons to hide by removing the plus and minus svg as well. I created different ids for them as well, but still no luck. Also, the value inside of the text box is getting cut off as well. How can I fix this? I have provided a snippet Some of the styling might be off because I took it from my original code and moved it around.

$('.btn-number').click(function(e){
    e.preventDefault();
    
    fieldName = $(this).attr('data-field');
    type      = $(this).attr('data-type');
    var input = $("input[name='" fieldName "']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
        if(type == 'minus') {
            
            if(currentVal > input.attr('min')) {
                input.val(currentVal - 1).change();
            } 
            if(parseInt(input.val()) == input.attr('min')) {
                $(this).attr('disabled', true);
            }

        } else if(type == 'plus') {

            if(currentVal < input.attr('max')) {
                input.val(currentVal   1).change();
            }
            if(parseInt(input.val()) == input.attr('max')) {
                $(this).attr('disabled', true);
            }

        }
    } else {
        input.val(0);
    }
});
$('.input-number').focusin(function(){
   $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
    
    minValue =  parseInt($(this).attr('min'));
    maxValue =  parseInt($(this).attr('max'));
    valueCurrent = parseInt($(this).val());
    
    name = $(this).attr('name');
    if(valueCurrent >= minValue) {
        $(".btn-number[data-type='minus'][data-field='" name "']").removeAttr('disabled')
    } else {
        alert('Sorry, the minimum value was reached');
        $(this).val($(this).data('oldValue'));
    }
    if(valueCurrent <= maxValue) {
        $(".btn-number[data-type='plus'][data-field='" name "']").removeAttr('disabled')
    } else {
        alert('Sorry, the maximum value was reached');
        $(this).val($(this).data('oldValue'));
    }
    
    
});
$(".input-number").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
             // Allow: Ctrl A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

/* https://bootsnipp.com/snippets/dGWP */
.center{
width: 150px;
  margin: 40px auto;
  
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Bootstrap Add Plus Minus Button To Input Number</title>
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div >
    <div >
          <span >
              <button type="button"  disabled="disabled" data-type="minus" data-field="quant[1]">
                  <span ></span>
              </button>
          </span>
          <input type="text" name="quant[1]"  value="8" min="8" max="30">
          <span >
              <button type="button"  data-type="plus" data-field="quant[1]">
                  <span ></span>
              </button>
          </span>
      </div>
      
</div>
<!-- partial -->
  <script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CodePudding user response：

to remove the box when the button pressed yoo need button:focus {outline:0;}

button:focus {
  outline: 0 !important;
}
.center {
  width: 150px;
  margin: 40px auto;
}

<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'>

<div >
  <div >
    <span >
      <button type="button"  data-type="minus" data-field="quant[1]">
        <span ></span>
      </button>
    </span>
    <input type="text" name="quant[1]"  value="8" min="8" max="30">
    <span >
      <button type="button"  data-type="plus" data-field="quant[1]">
        <span ></span>
      </button>
    </span>
  </div>
</div>