I'm trying to hide the border with javascript but doesnt work and is possible if try to hide border in html with java?

.........................

this is my page

this is my html:

<!-- Single Product Details -->
<div class="small-container single-product">
    <div class="row">
        <div class="col-2">
            <img src="Fn_Img/images/_Snake_ White Tee — Yeaaah! Studio.png" width="100%">
            <div class="small-img-row">
                <div class="small-img-col">
                    <img src="Fn_Img/images/gallery-1.jpg" width="100%">
                </div>
                <div class="small-img-col">
                    <img src="Fn_Img/images/gallery-2.jpg" width="100%">
                </div>
                <div class="small-img-col">
                    <img src="Fn_Img/images/gallery-3.jpg" width="100%">
                </div>
                <div class="small-img-col">
                    <img src="" width="100%">
                </div>
            </div>
        </div>

css

.single-product{
    margin-top: 80px;
}
.single-product .col-2 img{
    padding: 0;
    cursor: pointer;
}
.single-product .col-2{
    padding: 20px;
    position: relative;
}
.single-product h4{
    margin: 20px 0;
    font-size: 22px;
    font-weight: bold;
}
.single-product select{
    display: block;
    padding: 10px;
    margin-top: 20px;   
}
.single-product input{
    width: 50px;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    margin-right: 10px;
    border: 1px solid #000;
}
input:focus{
    outline: none;
}
.col-2 img{
    border: 1px solid #555;
}
.single-product .fa{
    color: #ff523b;
    margin-left: 10px;
}
.small-img-row{
    display: flex;
    justify-content: space-between;
}
.small-img-col{
    flex-basis: 24%;
}

problem:

1. i want the border none if img doesn't exist
2. if img none the padding stays in place

CodePudding user response：

You can check the following CSS. It may helpful.

.single-product{
    margin-top: 80px;
}
.single-product .col-2 img{
    padding: 0;
    cursor: pointer;
}
.single-product .col-2{
    padding: 20px;
    position: relative;
}
.single-product h4{
    margin: 20px 0;
    font-size: 22px;
    font-weight: bold;
}
.single-product select{
    display: block;
    padding: 10px;
    margin-top: 20px;   
}
.single-product input{
    width: 50px;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    margin-right: 10px;
    border: 1px solid #000;
}
input:focus{
    outline: none;
}

.col-2 img[src*=".jpg"] {
    border: 1px solid #555;
}
.col-2 img[src=""] {
    border: none;
    padding: 30px; /*use your required custom padding here*/
}
.single-product .fa{
    color: #ff523b;
    margin-left: 10px;
}
.small-img-row{
    display: flex;
    justify-content: space-between;
}
.small-img-col{
    flex-basis: 24%;
}

<div class="small-container single-product">
  <div class="row">
      <div class="col-2">
          <img src="https://via.placeholder.com/300.jpg/09f/fff" width="100%">
          <div class="small-img-row">
              <div class="small-img-col">
                  <img src="https://via.placeholder.com/150.jpg/09f/fff" width="100%">
              </div>
              <div class="small-img-col">
                  <img src="https://via.placeholder.com/150.jpg/09f/fff" width="100%">
              </div>
              <div class="small-img-col">
                  <img src="https://via.placeholder.com/150.jpg/09f/fff" width="100%">
              </div>
              <div class="small-img-col">
                  <img src="" width="100%">
              </div>
          </div>
      </div>
      </div>
      </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>