add close button to messages Magento 2

Question

Need to add close button in default Magento messages(success,error,notice). I have tried to add it in messages.phtml but nothing happens.

Please help!

Answer 1

Below is the code and it's working fine.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div data-bind="scope: 'messages'" id="Myid" >
    <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
    <div role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
            <div data-bind="html: message.text"></div>
            <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;' class="customClose">x</span> 
        </div>
          
    </div>

    <!-- /ko -->
    <!-- ko if: messages().messages && messages().messages.length > 0 -->
    <div role="alert" data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
            <div data-bind="html: message.text"></div>
             <span id='addtocartclose' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;' class="customClose">x</span> 
        </div>

    </div>
    <!-- /ko -->

</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "messages": {
                            "component": "Magento_Theme/js/view/messages"
                        }
                    }
                }
            }
    }
</script>

<script>
function toggleText(){
  var x = document.getElementById("Myid");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
<style type="text/css">
    .alert .message .customClose{
    display: block;
}

.alert .customClose{
    display: none;
}
</style>

Answer 2

Please use the blog for refrence to hide the messages

https://www.interactiv4.com/blog-es-en/automatically-hide-messages-in-magento-2/?lang=en