How can I remove/delete a HTML element using JavaScript?-CodePudding

I'm creating a warning paragraph that shows an error if the email is incorrect, is empty, or if it was sent. And what happens is that after showing the first warning, I want to cancel the creation of another one, so that doesn't pile up.

The current option I'm trying is to remove the warning if it already exists, otherwise, it can be created. But I don't know why it's not happening.

JS:

const input = document.querySelector('#emailInput');
const form = document.querySelector('#myForm')
const button = document.querySelector('#notify')
const validRegex = /^(([^<>()[\]\.,;:\s@\"] (\.[^<>()[\]\.,;:\s@\"] )*)|(\". \"))@(([^<>()[\]\.,;:\s@\"] \.) [^<>()[\]\.,;:\s@\"]{2,})$/i;

form.addEventListener('submit', function (e){
    e.preventDefault()
});

button.addEventListener('click', validateEmail)

function validateEmail(){
    let inputValue = input.value;
    if(inputValue.match(validRegex)){
        createWarning('Email sent!')
    }
    else if(inputValue == ''){
        createWarning('Please provide an email!');
    }
    else{
        createWarning('Please provid a valid email address')
    }
}

function createWarning(message){
    let warning = document.createElement('p');
    if (document.getElementById(warning) == null){
        warning.innerHTML = message;
        warning.classList.add('warning');
        warning.setAttribute('id','warning');
        input.insertAdjacentElement('afterend',warning);
    }
    
    else{
        const error = getElementById(warning)
        error.remove()
    }
    
}

@import url('https://fonts.googleapis.com/css2?family=Libre Franklin:wght@300;600;700&display=swap');

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body{
    background-color: whitesmoke;
    font-size: 20px;
    font-family: 'Libre Franklin', sans-serif;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    height: 100vh;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
}

.title{
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-name{
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.dot{
    color: hsl(223, 87%, 63%);
}

.intro{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-between;
    gap: 15px;
    justify-content: space-between;
}

.subtitle h2{
    font-weight: 600;
    font-size: 20px;
}

.launching{
    color: rgba(190, 160, 83, 0.602);
    font-weight: 200;
}

.paragraph p{
    font-weight: 300;
    font-size: 14px;
    color: rgb(41, 37, 0);
}

form{
    display: flex;
    align-items: center;
    align-content: space-between;
    flex-direction: column;
}

#emailInput{
    border-radius: 50px;
    border: 1px solid hsl(223, 100%, 88%);
    width: 100%;
    padding: 10px 35px;
    font-family: 'Libre Franklin', sans-serif;
}

.warning{
    color: hsl(354, 100%, 66%);
    font-size: small;
    font-family: 'Libre Franklin', sans-serif;
    margin: 5px;
}

#emailInput:focus{
    outline: none;
}

#notify{
    background-color: hsl(223, 87%, 63%);
    color: whitesmoke;
    border-radius: 50px;
    padding: 10px 20px;
    width: 100%;
    border: 1px solid rgba(88, 78, 78, 0);
    font-weight: bold;
    margin-top: 15px;
}

.social-media{
    width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-content: space-between;
    justify-items: center;
}

.around{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid hsla(0, 0%, 59%, 0.192);
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
.fab{
    color: hsl(223, 87%, 63%);
    font-size: medium;
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/b5c693247f.js" crossorigin="anonymous"></script>
  <title>Frontend Mentor | Ping coming soon page</title>
</head>
<body>
  <div >
    <div >
      <h1 >PING<span >.</span></h1>
    </div>
    <div >
      <div ><h2><span >We are launching</span> soon!</h2></div>
      <div ><p>Subscribe and get notified</p></div>
      <div >
        <form id="myForm" name="myForm">
          <input type="email" id="emailInput" name="emailInput" placeholder="Your email address...">
          <button type="submit" id="notify">Notify Me</button>
        </form>
      </div>
    </div>
    <div >
      <img src="images/illustration-dashboard.png" alt="Dashboard Image" width="300" height="250">
    </div>
    <div >
      <div ><i ></i></div>
      <div ><i ></i></div>
      <div ><i ></i></div>
    </div>
  </div>

  <footer>
    <p >
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://github.com/HBortolim">Henrique Bortolim</a>.
    </p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

CodePudding user response：

Call getElementById from document and use the string-based ID for 'warning' instead of the reference to the element as your argument to document.getElementById() Corrected code is below:

const input = document.querySelector('#emailInput');
const form = document.querySelector('#myForm')
const button = document.querySelector('#notify')
const validRegex = /^(([^<>()[\]\.,;:\s@\"] (\.[^<>()[\]\.,;:\s@\"] )*)|(\". \"))@(([^<>()[\]\.,;:\s@\"] \.) [^<>()[\]\.,;:\s@\"]{2,})$/i;

form.addEventListener('submit', function (e){
    e.preventDefault()
});

button.addEventListener('click', validateEmail)

function validateEmail(){
    let inputValue = input.value;
    if(inputValue.match(validRegex)){
        createWarning('Email sent!')
    }
    else if(inputValue == ''){
        createWarning('Please provide an email!');
    }
    else{
        createWarning('Please provid a valid email address')
    }
}

function createWarning(message){
    let warning = document.createElement('p');
    let warningId = 'warning';
    if (document.getElementById(warningId) == null) {
        warning.innerHTML = message;
        warning.classList.add('warning');
        warning.setAttribute('id', warningId);
        input.insertAdjacentElement('afterend',warning);
    }    
    else {
        const error = document.getElementById(warningId)
        error.remove()
    }    
}

@import url('https://fonts.googleapis.com/css2?family=Libre Franklin:wght@300;600;700&display=swap');

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body{
    background-color: whitesmoke;
    font-size: 20px;
    font-family: 'Libre Franklin', sans-serif;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    height: 100vh;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
}

.title{
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-name{
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.dot{
    color: hsl(223, 87%, 63%);
}

.intro{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-between;
    gap: 15px;
    justify-content: space-between;
}

.subtitle h2{
    font-weight: 600;
    font-size: 20px;
}

.launching{
    color: rgba(190, 160, 83, 0.602);
    font-weight: 200;
}

.paragraph p{
    font-weight: 300;
    font-size: 14px;
    color: rgb(41, 37, 0);
}

form{
    display: flex;
    align-items: center;
    align-content: space-between;
    flex-direction: column;
}

#emailInput{
    border-radius: 50px;
    border: 1px solid hsl(223, 100%, 88%);
    width: 100%;
    padding: 10px 35px;
    font-family: 'Libre Franklin', sans-serif;
}

.warning{
    color: hsl(354, 100%, 66%);
    font-size: small;
    font-family: 'Libre Franklin', sans-serif;
    margin: 5px;
}

#emailInput:focus{
    outline: none;
}

#notify{
    background-color: hsl(223, 87%, 63%);
    color: whitesmoke;
    border-radius: 50px;
    padding: 10px 20px;
    width: 100%;
    border: 1px solid rgba(88, 78, 78, 0);
    font-weight: bold;
    margin-top: 15px;
}

.social-media{
    width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-content: space-between;
    justify-items: center;
}

.around{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid hsla(0, 0%, 59%, 0.192);
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
.fab{
    color: hsl(223, 87%, 63%);
    font-size: medium;
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/b5c693247f.js" crossorigin="anonymous"></script>
  <title>Frontend Mentor | Ping coming soon page</title>
</head>
<body>
  <div >
    <div >
      <h1 >PING<span >.</span></h1>
    </div>
    <div >
      <div ><h2><span >We are launching</span> soon!</h2></div>
      <div ><p>Subscribe and get notified</p></div>
      <div >
        <form id="myForm" name="myForm">
          <input type="email" id="emailInput" name="emailInput" placeholder="Your email address...">
          <button type="submit" id="notify">Notify Me</button>
        </form>
      </div>
    </div>
    <div >
      <img src="images/illustration-dashboard.png" alt="Dashboard Image" width="300" height="250">
    </div>
    <div >
      <div ><i ></i></div>
      <div ><i ></i></div>
      <div ><i ></i></div>
    </div>
  </div>

  <footer>
    <p >
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://github.com/HBortolim">Henrique Bortolim</a>.
    </p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

CodePudding user response：

Instead of creating a new item and deleting it, you can define a that will display the notification message:

<span id="userMessage"></span>

const input = document.querySelector('#emailInput');
const form = document.querySelector('#myForm')
const button = document.querySelector('#notify')
const validRegex = /^(([^<>()[\]\.,;:\s@\"] (\.[^<>()[\]\.,;:\s@\"] )*)|(\". \"))@(([^<>()[\]\.,;:\s@\"] \.) [^<>()[\]\.,;:\s@\"]{2,})$/i;

form.addEventListener('submit', function (e){
    e.preventDefault()
});

button.addEventListener('click', validateEmail)

function validateEmail(){
    let inputValue = input.value;
    
    if(inputValue.match(validRegex))
        createWarning('Email sent!')
    else if(inputValue == '')
        createWarning('Please provide an email!');
    else
        createWarning('Please provid a valid email address')
}

/* The following method has been edited to update the content of the <span> element. */
function createWarning(message){
    let warning = document.createElement('p');
    let userMessageElement = document.getElementById('userMessage');
    userMessageElement.innerHTML = message;
    userMessageElement.classList.add("warning");
}

@import url('https://fonts.googleapis.com/css2?family=Libre Franklin:wght@300;600;700&display=swap');

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body{
    background-color: whitesmoke;
    font-size: 20px;
    font-family: 'Libre Franklin', sans-serif;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    height: 100vh;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
}

.title{
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-name{
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.dot{
    color: hsl(223, 87%, 63%);
}

.intro{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-between;
    gap: 15px;
    justify-content: space-between;
}

.subtitle h2{
    font-weight: 600;
    font-size: 20px;
}

.launching{
    color: rgba(190, 160, 83, 0.602);
    font-weight: 200;
}

.paragraph p{
    font-weight: 300;
    font-size: 14px;
    color: rgb(41, 37, 0);
}

form{
    display: flex;
    align-items: center;
    align-content: space-between;
    flex-direction: column;
}

#emailInput{
    border-radius: 50px;
    border: 1px solid hsl(223, 100%, 88%);
    width: 100%;
    padding: 10px 35px;
    font-family: 'Libre Franklin', sans-serif;
}

.warning{
    color: hsl(354, 100%, 66%);
    font-size: small;
    font-family: 'Libre Franklin', sans-serif;
    margin: 5px;
}

#emailInput:focus{
    outline: none;
}

#notify{
    background-color: hsl(223, 87%, 63%);
    color: whitesmoke;
    border-radius: 50px;
    padding: 10px 20px;
    width: 100%;
    border: 1px solid rgba(88, 78, 78, 0);
    font-weight: bold;
    margin-top: 15px;
}

.social-media{
    width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-content: space-between;
    justify-items: center;
}

.around{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid hsla(0, 0%, 59%, 0.192);
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
.fab{
    color: hsl(223, 87%, 63%);
    font-size: medium;
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/b5c693247f.js" crossorigin="anonymous"></script>
  <title>Frontend Mentor | Ping coming soon page</title>
</head>
<body>
  <div >
    <div >
      <h1 >PING<span >.</span></h1>
    </div>
    <div >
      <div ><h2><span >We are launching</span> soon!</h2></div>
      <div ><p>Subscribe and get notified</p></div>
      <div >
        <form id="myForm" name="myForm">
          <input type="email" id="emailInput" name="emailInput" placeholder="Your email address...">
          
          <!-- The following item has been added. -->
          <span id="userMessage"></span>
          <button type="submit" id="notify">Notify Me</button>
        </form>
      </div>
    </div>
    <div >
      <img src="images/illustration-dashboard.png" alt="Dashboard Image" width="300" height="250">
    </div>
    <div >
      <div ><i ></i></div>
      <div ><i ></i></div>
      <div ><i ></i></div>
    </div>
  </div>

  <footer>
    <p >
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://github.com/HBortolim">Henrique Bortolim</a>.
    </p>
  </footer>
  <script src="app.js"></script>
</body>
</html>