Tips for implementing jQuery on a CSS selector's :before pseudo-element

Question

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript?

https://i.sstatic.net/Z5uSq.png

CSS

.validation-summary-errors{
    position: absolute;
    width: 260px;
    padding: 20px;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 4px;
    border: #000 solid 1px;
    box-shadow: #232323 1px 1px 6px;
}

.validation-summary-errors:before {
    display: block;
    content: "X";
    position: absolute;
    right: -15px;
    top: -15px;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 5px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    width: 29px;
    box-sizing: border-box;
}

HTML in View (Edit)

 <div class="message-error">  

                            @validationSummary

                    </div>

javascript jquery html css asp.net-mvc

Answer 1

Answer №1

:before is a pseudo element that cannot be accessed in the DOM. Instead, create a span or div with those styles and utilize its click event.

Note: Ensure that you have defined the CSS for span.close :-)

Solution 1: Edit the HTML file.

$(function() {
  $('.close').click(function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span.close {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
  <span class="close">X</span>
</div>

Solution 2: For dynamically created HTML.

$(function() {
  $('.validation-summary-errors').append('<span class="close">X</span>');

  $('.validation-summary-errors').on('click', 'span.close', function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
</div>

Answer 2

:before is a pseudo element that cannot be accessed in the DOM. Instead, create a span or div with those styles and utilize its click event.

Note: Ensure that you have defined the CSS for span.close :-)

Solution 1: Edit the HTML file.

$(function() {
  $('.close').click(function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span.close {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
  <span class="close">X</span>
</div>

Solution 2: For dynamically created HTML.

$(function() {
  $('.validation-summary-errors').append('<span class="close">X</span>');

  $('.validation-summary-errors').on('click', 'span.close', function() {
    $(this).parent().hide();
  });
});

.validation-summary-errors {
  position: absolute;
  width: 260px;
  padding: 20px;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: #000 solid 1px;
  box-shadow: #232323 1px 1px 6px;
}
span {
  cursor: pointer;
  display: block;
  content: "X";
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 5px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  width: 29px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="validation-summary-errors">
  This specified email already exists
</div>

Answer 3

Answer №2

To distinguish between clicks on the parent and pseudo element, consider utilizing the pointer-events CSS attribute. This allows you to set up a click listener on the parent that will only respond to interactions with the pseudo element.

If there is a need to enable pointer events for other purposes on the parent, this approach may present challenges.

Check out the example on this fiddle for reference.

Answer 4

To distinguish between clicks on the parent and pseudo element, consider utilizing the pointer-events CSS attribute. This allows you to set up a click listener on the parent that will only respond to interactions with the pseudo element.

If there is a need to enable pointer events for other purposes on the parent, this approach may present challenges.

Check out the example on this fiddle for reference.

Answer 5

Answer №3

Pseudo-elements do not exist in the DOM. Although you can access them using the getComputedStyle method, they cannot be directly manipulated.

Alternatively, you can create a div with absolute positioning and either place the X inside it or use the ::before pseudo-element. Then, set your event listener on that div.

Answer 6

Pseudo-elements do not exist in the DOM. Although you can access them using the getComputedStyle method, they cannot be directly manipulated.

Alternatively, you can create a div with absolute positioning and either place the X inside it or use the ::before pseudo-element. Then, set your event listener on that div.

Tips for implementing jQuery on a CSS selector's :before pseudo-element

Answer №1

Answer №2

Answer №3

Similar questions

The border at the top of the table's header will be removed and the

Tips for maintaining DataTables filters after navigating Back/Forward or refreshing the page

Is there a more efficient method to achieve the desired effect without making multiple calls to jQuery ajaxSuccess?

Ensuring secure Firebase JSON database access through Firebase authentication

Looking to update a component in Vue 3 and Laravel 9 without the need to reload the entire webpage

Guide to linking a label to a checkbox without utilizing the "for=id" method

How can Node.js and Socket.io be used with either PHP or jQuery to search within a text file?

Load a file once the Jest environment has been properly deconstructed

Managing State in React using Maps

Unable to establish connection with Uploadthing due to a timeout error

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

Difficulty encountered when positioning a container using BootStrap 4

Optimal method for implementing $scope.$apply(); or $scope in scenarios outside of Angular when working with Angular Components

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

How can I create a DIV element that consistently shows text when clicked?

Experiencing difficulties in transmitting multipart form data from React to Express Js accurately

Ways to center text in a div using vertical alignment

Gridsome's createPages and createManagedPages functions do not generate pages that are viewable by users

How can I use PHP to update and select on the same page simultaneously?

The polygon array feature is not functioning as expected in the Google Maps API