CSS tips: How to achieve image deletion effect

In web development, we often need to implement some special effects to improve the interactivity and beauty of the page. Among them, picture deletion effect is a common requirement. For example, on a product list page, users can delete products they do not want by clicking the "Delete" button. At this time, the corresponding product images on the page should also be deleted. So, how to achieve this effect? This article will introduce a method to achieve image deletion effect through CSS.

First of all, we need to make it clear that deleting a picture does not mean that the picture disappears from the page, but that the picture on the page no longer takes up space and layout. We can achieve the effect of image deletion by setting the width and height of the image to 0, and then setting the height of its outer container element to 0. The specific implementation steps are as follows:

Step 1: HTML structure

We assume that what we want to implement is a product list page. Each product has a picture and some description text. Our HTML structure should look like this:

<div>
    <img  src="/static/imghwm/default1.png" data-src="商品图片的URL" class="lazy" alt="CSS tips: How to achieve image deletion effect" >
    <div>
        商品描述文字
    </div>
    <button>删除</button>
</div>

In the above code, we define an outer container element .item for each product, which contains the product image <img alt="CSS tips: How to achieve image deletion effect" >, product description text <div> and "Delete" button <code><button></button>.

Step 2: CSS style

(1) Clear the default style of the image

In order to allow the image to be displayed exactly according to our requirements, we need to clear the default style of the image. As follows:

img {
    display:block;
    max-width:100%; /* 避免图片过大超出容器 */
    height:auto; /* 根据宽度等比缩放高度 */
}

In the above code, we set the display attribute of the image to block, so that the image can be positioned and centered like a block-level element; At the same time, we set the max-width of the image to 100% to prevent the image from being too large to exceed its container; finally, we set the height of the image to auto, so that the height of the image will be automatically scaled proportionally to the width to avoid image deformation.

(2) Delete picture style

Next, we need to set the style of deleting pictures. We can achieve the effect of image deletion by setting the width and height of the product image to 0, and then setting the height of the outer container element to 0. The code is as follows:

.item.deleted img {
    width:0;
    height:0;
}

.item.deleted {
    height:0;
}

In the code, we first set the deletion state Add a .deleted class to the product below, and then use the CSS selector to set the width and height of its image to 0, and also set the height of its outer container element to 0.

Step 3: JavaScript code

Finally, we need to bind the click event of the delete button to the effect of deleting the image. The code is as follows:

//获取所有删除按钮
var deleteBtns = document.querySelectorAll('.delete-btn');

//给每个按钮添加点击事件
deleteBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
        var item = this.parentNode;
        item.classList.add('deleted'); //添加.deleted类
    });
});

In the code, we first get all the delete buttons in the page through the document.querySelectorAll method, and use forEach to loop through them. Then, we add a click event to each button, find the corresponding product container element .item when clicked, and add the .deleted class to achieve the deletion effect of the corresponding product image.

Summary:

Through the above method, we can easily achieve the effect of deleting images on web pages. Of course, this is just one of the methods. In fact, there are many ways to achieve special effects in web pages. We need to choose the most appropriate and simplest method to achieve it based on actual needs. At the same time, we also need to be careful not to cause unnecessary trouble or interference to users when adding special effects to web pages.