Question

我有以下数据来自另一个不在我控制范围内的服务器，并且在浏览器中显示它们时，我必须提供一种解决方案

1）在悬停时显示childElement类的删除按钮

2）单击删除按钮，然后删除该childElement div

有什么办法可以使用CSS / JS或Vuejs（在悬停时动态添加Delete按钮并在单击按钮时删除元素）吗？谢谢

.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}

<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>

Answer 1

您的工作基本上可以归结为一些脚本，该脚本将查找所有元素并使用侦听器自动追加元素。

const childElements = document.querySelectorAll('.childElement');
childElements.forEach(childElement => {
  // create button for each childElement
  const deleteButton = document.createElement('button');
  deleteButton.setAttribute('hidden', '');
  deleteButton.innerText = "Click to delete";
  // append button to the childElement
  childElement.appendChild(deleteButton);

  // add event listeners
  childElement.addEventListener('mouseenter', event => {
    deleteButton.removeAttribute('hidden');
  });

  childElement.addEventListener('mouseleave', event => {
    deleteButton.setAttribute('hidden', '');
  });

  deleteButton.addEventListener('click', event => {
    childElement.setAttribute('hidden', '');
  });
});

.childElement {
  width: 100px;
  height: 100px;
  background-color: #f3f3f3;
  margin-top: 10px;
  padding: 10px;
}

<div id="videos">
  <div class="childElement">
    first div
  </div>
  <div class="childElement">
    second div
  </div>
  <div class="childElement">
    third div
  </div>
</div>

Answer 2

您可以在数据对象中添加一个名为childDivs的数组，该数组中的哪个项最初包含一个布尔值showBtn，其值为false，并且要在div内显示的文本元素

更新：

当您可以在前端控制数据时，上述逻辑可能会很有用，但是根据OP的用例，我们可以将@GenericUser给定的脚本添加到已挂接的钩子中。

new Vue({
  el: '#app',
  data() {
    return {
      childDivs: [{
          text: 'First',
          showBtn: false
        },
        {
          text: 'Second',
          showBtn: false
        },
        {
          text: 'Third',
          showBtn: false
        }
      ]
    }
  },
  methods: {
    remove(i) {
      this.childDivs.splice(i, 1)

    }
  },

  mounted() {
    const childElements = document.querySelectorAll('.childElement');
    childElements.forEach(childElement => {
      const deleteButton = document.createElement('button');
      deleteButton.setAttribute('hidden', '');
      deleteButton.innerText = "delete";
      deleteButton.classList.add("btn")
      deleteButton.classList.add("btn-danger")
      childElement.appendChild(deleteButton);
      childElement.addEventListener('mouseenter', event => {
        deleteButton.removeAttribute('hidden');
      });
      childElement.addEventListener('mouseleave', event => {
        deleteButton.setAttribute('hidden', '');
      });

      deleteButton.addEventListener('click', event => {
        childElement.setAttribute('hidden', '');
      });
    });
  }

})

.childElement {
  width: 100px;
  height: 100px;
  background-color: #f3f3f3;
  margin-top: 10px;
  padding: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />


<div id="app" data-app>

  <div id="videos">
    <div class="childElement">
      first div
    </div>
    <div class="childElement">
      second div
    </div>
    <div class="childElement">
      third div
    </div>
  </div>

</div>

Answer 3

尝试此代码也使用jquery进行项目像这样

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>


<div id="videos">
<div class="childElement" id="divOne" >
<div id="delete">X</div>
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>

<script>  
$(document).ready(function(){
  $("#divOne").hover(function(){
    $(this).css("visibility", "visible");
    }, function(){
    $(this).css("visibility", "hidden");
  });

  $("#delelte").on("click",()=>{
      $("#divOne").children().remove();
   });
});
</script>

Answer 4

您可以尝试使用jQuery：

$('body').on('mouseenter', '.childElement', function(e){
  
    $(this).append('<div class="remove">remove it</div>');
  
    $('.childElement').on('mouseleave', function(){
      $('.remove').remove();
    });
  
    $('body').on('click', '.remove', function(e){
      $(this).parent().remove();
    });

});

.childElement {
width:100px;
height:100px;
background-color:#f3f3f3;
margin-top:10px;
padding:10px;
}

.remove {
 position:absolute;
 width: 100px;
 height: 30px;
 background: #000;
 color:#fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="videos">
<div class="childElement">
first div
</div>
<div class="childElement">
second div
</div>
<div class="childElement">
third div
</div>
</div>

在鼠标悬停时添加删除按钮，并在按下按钮时将其删除

4 个答案: