时间戳

首页 > 解决方案 > 按下垃圾桶按钮时如何删除消息，已删除的消息不应再在视图中可见

javascript - 按下垃圾桶按钮时如何删除消息，已删除的消息不应再在视图中可见

问题描述

我添加了一个垃圾按钮，按下该按钮会删除整个消息框/框架，并且此消息存储在一个切换按钮（已删除消息:) 中，单击该按钮应切换视图以仅显示已删除的消息。如何做到这一点？

HTML：

消息查看器 
    <div><h2 id='starCounter' >Starred:</h2></div>
    <div><h2 id='trashCounter' >Trashed Messages:</h2></div>

    <figure class=frame id="box">
    <span class="helper"></span><img class= "profile1" src="widows2.jpg" alt="my img"/>
    <p>Twitter | Feb, 2017 <br><br>
    Message 1 from person Name. His Favourite music genre is pop</p>
    <button class="trash_btn" id="btn2" >Trash</button>
    <button class="btn-hold" id="btn1" data-text-swap=" Starred!">Star Message!</button>    
    <figcaption id="text">Name</figcaption>
    </figure>

CSS：

    .helper {
            display: inline-block;
            height: 95%;

        }
        .frame {
            height: 100px;      
            width: 100px;
            white-space: nowrap;
            text-align: center; 
            margin: 1em 0;
            padding: 20px;
            float: left;

        }

        .profile1 {
            background: #3A6F9A;
            float: left;
            vertical-align: left;
            max-height: 150px;
            max-width: 150px;
            justify-content: space-around;
             text-align: justify;
            width: [width of img];
        }

        #box {
            width: 1460px;
            justify-content: space-around;
            height: 150px; 
            box-sizing: 15px;
            border: 1px solid;

        }

JavaScript：

var count;
var star_count =0;
var button = document.querySelectorAll(".frame button")[1];
  button.addEventListener('click', function() {

  if(this.classList.contains('btn-alt-color')){
    this.classList.remove('btn-alt-color');
    star_count--;
  } 
  else {
    this.classList.add('btn-alt-color');   
    star_count++;
  }
  console.log(star_count);
  document.getElementById("starCounter").innerText = "Starred: " +  star_count;

  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

标签： javascripthtmlcss

解决方案

您需要在单击 thrash 按钮时删除 dom 元素。将 html div 包装在父 div 中，并从按钮和图形中删除重复的 id。

下面是运行示例

html代码-

    <div>
    <h2 id='starCounter'>Starred:</h2>
</div>
<div>
    <h2 id='trashCounter'>Trashed Messages:</h2>
</div>
<div id="parent">
    <figure class=frame >
        <span class="helper"></span><img class="profile1" src="widows2.jpg" alt="my img" />
        <p>Twitter | Feb, 2017 <br><br>
            Message 1 from person Deep. His Favourite music genre is pop</p>
        <button class="trash_btn"  onclick="thrashMe(this)">Trash</button>
        <button class="btn-hold" id="btn1" data-text-swap=" Starred!">Star Message!</button>
        <figcaption id="text">Deep Mehta</figcaption>
    </figure>

    <figure class=frame >
        <span class="helper"></span>
        <img class="profile1" src="man-how-to.jpg" alt="my img" />
        <p>Twitter | Feb, 2017 <br><br>
            Message 1 from person Deep. His Favourite music genre is pop</p>
        <button class="trash_btn"  onclick="thrashMe(this)">Trash</button>
        <button class="btn-hold" data-text-swap="Starred!">Star Message!</button>
        <figcaption id="text">Tushar Kamble</figcaption>
    </figure>

    <figure class=frame >
        <span class="helper"></span><img class="profile1" src="download.jpg" alt="my img" />
        <p>Twitter | Feb, 2017 <br><br>
            Message 1 from person Deep. His Favourite music genre is pop</p>
        <button class="trash_btn"  onclick="thrashMe(this)">Trash</button>
        <button class="btn-hold" data-text-swap="Starred!">Star Message!</button>
        <figcaption id="text">Parth Jaiswal</figcaption>
    </figure>

    <figure class=frame >
        <span class="helper"></span><img class="profile1" src="images.jpg" alt="my img" />
        <p>Twitter | Feb, 2017 <br><br>
            Message 1 from person Deep. His Favourite music genre is pop</p>
        <button class="trash_btn"  onclick="thrashMe(this)">Trash</button>
        <button class="btn-hold" data-text-swap="Starred!">Star Message!</button>
        <figcaption id="text">Arnab Tarwani</figcaption>
    </figure>
</div>

JavaScript 代码-

<script>
    function thrashMe(obj) {
        document.getElementById("parent").removeChild(obj.closest("figure"));
    }
</script>

推荐阅读