Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Track Changes</title>
    <style>
        .removed {
            background-color: #f8d7da;
            text-decoration: line-through;
        }
        .added {
            background-color: #d4edda;
        }
        .controls {
            margin: 20px 0;
        }
        .btn {
            margin-right: 10px;
            padding: 5px 10px;
            border: none;
            cursor: pointer;
        }
        .btn-accept {
            background-color: #28a745;
            color: white;
        }
        .btn-reject {
            background-color: #dc3545;
            color: white;
        }
    </style>
</head>
<body>

<div contenteditable="true" id="editor">
    <span class="removed">This is a removed text.</span>
    <span class="added">This is an added text.</span>
</div>

<div class="controls">
    <button class="btn btn-accept" onclick="acceptChanges()">Accept Changes</button>
    <button class="btn btn-reject" onclick="rejectChanges()">Reject Changes</button>
</div>

<script>
    function acceptChanges() {
        let editor = document.getElementById('editor');
        let removed = editor.getElementsByClassName('removed');
        let added = editor.getElementsByClassName('added');

        while (removed.length > 0) {
            removed[0].parentNode.removeChild(removed[0]);
        }

        while (added.length > 0) {
            let parent = added[0].parentNode;
            while (added[0].firstChild) {
                parent.insertBefore(added[0].firstChild, added[0]);
            }
            parent.removeChild(added[0]);
        }
    }

    function rejectChanges() {
        let editor = document.getElementById('editor');
        let removed = editor.getElementsByClassName('removed');
        let added = editor.getElementsByClassName('added');

        while (added.length > 0) {
            added[0].parentNode.removeChild(added[0]);
        }

        while (removed.length > 0) {
            let parent = removed[0].parentNode;
            while (removed[0].firstChild) {
                parent.insertBefore(removed[0].firstChild, removed[0]);
            }
            parent.removeChild(removed[0]);
        }
    }
</script>

</body>
</html>
Editor is loading...