How to remove one image from banner?

Question

Let say I have a banner image group.

<div class="bannerWrap">
<div class = "banner style="left: 0px;">
<img src = "something.jpg"  id="a">
<img src="something2.jpg" id="b">

</div>
</div>

When I move the banner image, only the banner style will be to change if I want to remove an image file in certain banner location

any good idea?

Answer 1

You could try changing the opacity with CSS like this:

#a {
    opacity : 0;
}

Answer 2

Try below code on your JS to remove the image with an id name of a.

$('#a').remove();

Answer 3

If you want to move image #a without effecting image #b then set image #a to position:relative

This allows you to modify the position of image #a relative to its original position without affecting the position of image #b

Here's what MDN docs say about position:relative:

... The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

This value creates a new stacking context when the value of z-index is not auto. The effect of relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

basic example:

.bannerWrap {
  border: 1px solid red;
  background: #111;
  display: inline-block;
}

#a {
  position: relative;
  top: 40px;
  left: 200px;
}

<div class="bannerWrap">
  <div class="banner">
    <img id="a" src="https://unsplash.it/300/300" alt="Image #a">
    <img id="b" src="https://unsplash.it/300/301" alt="Image #b">
  </div>
</div>

if you want to remove image #a completely without affecting the layout you can use visibility:hidden

MDN docs on visibility:hidden:

... The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).

basic example:

.bannerWrap {
  border: 1px solid red;
  background: #111;
  display: inline-block;
}

#a {
  visibility: hidden
}

<div class="bannerWrap">
  <div class="banner">
    <img id="a" src="https://unsplash.it/300/300" alt="Image #a">
    <img id="b" src="https://unsplash.it/300/301" alt="Image #b">
  </div>
</div>