Cara menggunakan delete button onclick javascript

We used the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

2 method to add a handler for the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

0 event to the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

4 element. This event handler will be called whenever the user clicks the box.

In the handler function, we called the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

1 method on the element to remove it from the DOM.

We could also have used the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

6 property on the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

7 object passed to the handler to remove the element.

const box = document.getElementById('box');box.addEventListener('click', (event) => {
  event.target.remove();
});

We can use the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

7 object to access useful information and perform certain actions related to the event. For the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

0 event, the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

6 property lets us access the DOM element that was clicked.

Removing the element with the

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <style>
      #box {
        height: 100px;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    Click the box to remove it.    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

6 property is useful when we want to dynamically remove many elements onclick.

For example:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    Click on a box to remove it.    <div class="container">
      <div class="box" id="box-1"></div>
      <div class="box" id="box-2"></div>
      <div class="box" id="box-3"></div>
    </div>    <script src="index.js"></script>
  </body>
</html>

const box = document.getElementById('box');box.addEventListener('click', () => {
  box.remove();
});

.container {
  display: flex;
}.box {
  height: 100px;
  width: 100px;
  margin: 5px;
}#box-1 {
  background-color: blue;
}#box-2 {
  background-color: red;
}#box-3 {
  background-color: green;
}

index.js

const boxes = document.getElementsByClassName('box');for (const box of boxes) {
  box.addEventListener('click', (event) => {
    event.target.remove();
  });
}

</body>
</html>6 property returns the innermost element in the DOM that was clicked. This is in contrast to the

const box = document.getElementById('box');box.addEventListener('click', () => {
  box.remove();
});

5 property, which returns the element that the event listener was added to.

Originally published at codingbeautydev.com

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.