var buttons = document.querySelectorAll('#messages-container .remove-button'); for (var i = 0; i < buttons.length; i++) { var button = buttons[i]; button.onclick = function() { var el = this.parentNode; el.parentNode.removeChild(el); }; } 
 body { margin: 10px auto; width: 470px; } h3 { margin: 0; padding-bottom: .3em; font-size: 1.1em; } p { margin: 0; padding: 0 0 .5em; } .pane { background: #edf5e1; padding: 10px 20px 10px; border-top: solid 2px #c4df9b; position: relative; } .remove-button { font-size: 110%; color: darkred; right: 10px; width: 24px; height: 24px; border: none; background: transparent; position: absolute; right: 0; top: 0; } 
  <div id="messages-container"> <div class="pane"> <h3>Π›ΠΎΡˆΠ°Π΄ΡŒ</h3> <p>Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ лошадь β€” ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΎΠ΅ сСмСйства Π½Π΅ΠΏΠ°Ρ€Π½ΠΎΠΊΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ…, ΠΎΠ΄ΠΎΠΌΠ°ΡˆΠ½Π΅Π½Π½Ρ‹ΠΉ ΠΈ СдинствСнный ΡΠΎΡ…Ρ€Π°Π½ΠΈΠ²ΡˆΠΈΠΉΡΡ ΠΏΠΎΠ΄Π²ΠΈΠ΄ Π΄ΠΈΠΊΠΎΠΉ лошади, Π²Ρ‹ΠΌΠ΅Ρ€ΡˆΠ΅ΠΉ Π² Π΄ΠΈΠΊΠΎΠΉ ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ нСбольшой популяции лошади ΠŸΡ€ΠΆΠ΅Π²Π°Π»ΡŒΡΠΊΠΎΠ³ΠΎ.</p> <button class="remove-button">[x]</button> </div> <div class="pane"> <h3>ΠžΡΡ‘Π»</h3> <p>Π”ΠΎΠΌΠ°ΡˆΠ½ΠΈΠΉ осёл ΠΈΠ»ΠΈ ишак β€” ΠΎΠ΄ΠΎΠΌΠ°ΡˆΠ½Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Π²ΠΈΠ΄ Π΄ΠΈΠΊΠΎΠ³ΠΎ осла, ΡΡ‹Π³Ρ€Π°Π²ΡˆΠΈΠΉ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΡΡ‚ΠΎΡ€ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠΈ хозяйства ΠΈ ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€Ρ‹ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°. ВсС ΠΎΠ΄ΠΎΠΌΠ°ΡˆΠ½Π΅Π½Π½Ρ‹Π΅ ослы относятся ΠΊ африканским ослам.</p> <button class="remove-button">[x]</button> </div> <div class="pane"> <h3>ΠšΠΎΡ€ΠΎΠ²Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ°Ρ€Π° слов ΠΎ Π΄ΠΈΠΊΠΎΠΌ Π±Ρ‹ΠΊΠ΅, ΠΎ Π²ΠΎΠ»Π°Ρ… ΠΈ ΠΎ Ρ‚Ρ‘Π»ΠΊΠ°Ρ…. </h3> <p>ΠšΠΎΡ€ΠΎΜΠ²Π° β€” самка домашнСго Π±Ρ‹ΠΊΠ°, одомашнСнного ΠΏΠΎΠ΄Π²ΠΈΠ΄Π° Π΄ΠΈΠΊΠΎΠ³ΠΎ Π±Ρ‹ΠΊΠ°, ΠΏΠ°Ρ€Π½ΠΎΠΊΠΎΠΏΡ‹Ρ‚Π½ΠΎΠ³ΠΎ ΠΆΠ²Π°Ρ‡Π½ΠΎΠ³ΠΎ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΎΠ³ΠΎ сСмСйства ΠΏΠΎΠ»ΠΎΡ€ΠΎΠ³ΠΈΡ…. Π‘Π°ΠΌΡ†Ρ‹ Π²ΠΈΠ΄Π° Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π±Ρ‹ΠΊΠ°ΠΌΠΈ, молодняк β€” тСлятами, кастрированныС самцы β€” Π²ΠΎΠ»Π°ΠΌΠΈ. ΠœΠΎΠ»ΠΎΠ΄Ρ‹Ρ… (Π΄ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ) самок Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Ρ‚Ρ‘Π»ΠΊΠ°ΠΌΠΈ. </p> <button class="remove-button">[x]</button> </div> </div>

it is not clear what happens when we click on a button

Closed due to the fact that off-topic participants Suvitruf ♦ , freim , LFC , aleksandr barakin , mymedia on 6 March at 5:24 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • β€œQuestions asking for help with debugging (β€œ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - freim, LFC
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Obviously deletes the parent element. What line is incomprehensible? - Alexey Ten
  • @Alexey Ten var el = this.parentNode; el.parentNode.removeChild (el); - xes
  • And what is there to understand? They took a parent. The parent of the parent (grandfather) was told to remove the child who is the parent. - Alexey Ten
  • @Grundy I know the value of remove; unclear el = this.parentNode; el.parentNode - xes
  • @xes parentNode - Grundy

1 answer 1

When you click on a button , the function is called. button.onclick => the parent element of the button is obtained (a green rectangle with text and a button) => the selected green rectangle is deleted through the parent element of the green rectangle (this is a container) ( removeChild to remove the child element)

  • unclear el = this.parentNode; el.parentNode - xes