Ву.Яш - добавить кнопку "удалить" при наведении курсора мыши и удалить его при нажатии на кнопку
У меня есть следующие данные, поступающие с другого сервера, который не находится под моим контролем, и при отображении его в браузере я должен предоставить решение
1) показать кнопку удаления для класса childElementпри наведении курсора мыши
2) Нажмите на кнопку Удалить и удалите этот childElementdiv
Есть ли способ сделать это с помощью CSS/JS или Vuejs (динамическое добавление кнопки удаления при наведении и удаление элемента при нажатии кнопки)? Спасибо
.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>
У вопроса есть решение - Посмотреть?
так что же пошло не так с ответом GenericUser?
Источник
Это решение, которое я ищу . В его ответе нет ничего плохого
Источник
я поместил его скрипт внутри смонтированного крючка экземпляра Vue и удалил логику, которую я делал раньше
Источник
Ответы - Ву.Яш - добавить кнопку "удалить" при наведении курсора мыши и удалить его при нажатии на кнопку / Vue.js - Add delete button on hover and delete it on button press
12.01.2019 07:00:03
Вы можете добавить массив в свой объект childDivschilddivs и какой элемент внутри этого массива содержит логическое showBtnintilially его значение 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>
Спасибо, но данные, которые я получаю от внешнего сервера, имеют структуру , о которой я упоминал, поэтому я не могу разделить их на дочерний объект данных и в цикле for.
не могли бы вы показать, как вы это получаете? и как вы хотите удалить элементы?
Это то, что я получаю от сервера и видео может иметь любое количество childElements <div id="videos"> <div class="childElement"> первый див </div> <div class="childElement"> второй див </div> <div class="childElement"> третий див </div> </div>
Пожалуйста, ознакомьтесь с решением, предоставленным GenericUser, и вы поймете, о чем я говорю
извини, я тебя неправильно понял
Нет, проблема, и спасибо за попытку помочь мне
12.01.2019 07:01:13
Попробуйте этот код также используйте 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>
извините, я не использую JQUERY здесь . только CSS / JavaScript / VUEJS
12.01.2019 07:04:23
Вы можете попробовать это с помощью 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>
извините, я не использую JQUERY здесь . только CSS / JavaScript / VUEJS
@Bujji пожалуйста, добавьте больше информации в следующий раз ( например, только родной js ), чтобы избежать подобных ситуаций, потому что jQuery-это библиотека JavaScript
Я прошу прощения. Спасибо и я позабочусь об этом
Является ответом!
12.01.2019 07:06:31
Ваша работа в основном сводится к некоторому скрипту, который найдет все элементы и автоматически добавит элементы со слушателями.
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>