JS 在删除前确认是否 - CSS

在开发 web 应用程序时，我们经常需要进行数据删除操作。删除可能会由用户意外或不小心发生，因此我们希望在删除之前提示用户确认是否要执行操作。JS 可以帮助我们实现此目的。

实现

我们可以使用 JS 创建一个确认对话框，询问用户是否确实要删除数据。如果用户点击“确定”按钮，则执行删除操作；否则取消操作。

CSS 样式

为了使确认对话框看起来更美观，我们可以使用 CSS 对其进行样式设置。

.confirmation {
    border: 1px solid #999;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    background-color: #fff;
    padding: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.confirmation p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

.confirmation .btn-confirm,
.confirmation .btn-cancel {
    background-color: #357ebd;
    color: #fff;
    padding: 5px 10px;
    border: none;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
}

.confirmation .btn-confirm:hover,
.confirmation .btn-cancel:hover {
    opacity: 0.9;
}

JS 代码

以下代码实现一个简单的确认对话框，它将提示用户是否要删除数据。

function confirmDelete() {
    let confirmation = document.createElement('div');
    confirmation.classList.add('confirmation');

    let p = document.createElement('p');
    p.textContent = 'Are you sure you want to delete?';

    let btnConfirm = document.createElement('button');
    btnConfirm.classList.add('btn-confirm');
    btnConfirm.textContent = 'Yes';

    let btnCancel = document.createElement('button');
    btnCancel.classList.add('btn-cancel');
    btnCancel.textContent = 'No';

    confirmation.appendChild(p);
    confirmation.appendChild(btnConfirm);
    confirmation.appendChild(btnCancel);
    document.body.appendChild(confirmation);

    btnConfirm.addEventListener('click', function() {
        deleteData();
        confirmation.remove();
    });

    btnCancel.addEventListener('click', function() {
        confirmation.remove();
    });
}

function deleteData() {
    // delete data here
}

let btnDelete = document.querySelector('.btn-delete');
btnDelete.addEventListener('click', function() {
    confirmDelete();
});

结论

通过以上代码，我们可以在删除数据前提示用户进行确认，保护了数据的完整性，提高了用户体验。