Quiero hacer una lista en la que el usuario puede agregar elementos haciendo clic en un botón, cambiar su color con un clic en el elemento y eliminarlos con un clic largo en el elemento.

Mi código funciona bien para agregar divs y cambiar su color:

$(document).ready(function(){
$('button').click(function(){
    var toAdd = $('input[name=shop-item]').val();
    if (toAdd == ''){
        return false;
    }
    else {
        $('#list').append('<div class="item item-red">' + toAdd + '</div>');
    });

$(document).on('click', '.item', function(){
    $(this).toggleClass('item-red');
    $(this).toggleClass('item-green');
});

Pero luego me gustaría poder eliminar un solo div con un clic largo. Encontré algunos ejemplos como los siguientes:

var timeoutId = 0;
$(document).on('mousedown', '.item', function(){
    timeoutId = setTimeout(function(){ $(this).remove() }, 500);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeoutId);
});

Sin embargo, no funciona con 'this'. Pero si uso '.item' en su lugar, obviamente, todos los elementos adjuntos se eliminan.

javascript jquery append long-click
0
peddersen 1 sep. 2014 a las 22:26

2 respuestas

La mejor respuesta

Dentro de su función setTimeout, usted está en un ámbito diferente. this tiene un significado diferente. En su lugar, puede almacenarlo en caché:

$(document).on('mousedown', '.item', function(){
    var $this= $(this);
    timeoutId = setTimeout(function(){ $this.remove() }, 500);
})
0
Stryner 1 sep. 2014 a las 18:36

Puede almacenar la marca de tiempo del evento de mousedown cada evento tiene una marca de tiempo en su prototipo

var mouseDownTimestamp = 0 $(document).on('mousedown',function(event){ mouseDownTimestamp = event.timeStamp;} ); $(document).on('mouseup',function(event){ //if the mouse up is after 499ms if(mouseDownTimestamp < event.timeStamp - 499){ //or $(event.target).remove(); //or $(event.target).closest('.class of the holder').remove(); $(selector).remove(); } });

0
D.Dobchev 1 sep. 2014 a las 19:02

Preguntas relacionadas

28 ¿Cuál es la mejor manera de agregar opciones a una selección desde como un objeto JS con jQuery?
27 ¿Cómo verifico si un elemento está oculto en jQuery?
23 Eliminar elementos de matriz en JavaScript - eliminar vs empalmar
30 jQuery desplazarse al elemento

Nuevas preguntas

2 Cómo convertir una cadena en una matriz en JS, dividir no funciona
1 Solicitud para usar el token, pero el token no estaba disponible para el cliente. - Error de DiscordJS
1 Next Js, por qué los gatitos no se cargan
4 Eliminar el objeto duplicado de la matriz si la clave está disponible
1 ¿Cómo hacer una nueva matriz de objetos con diferentes nombres de clave de otra matriz de objetos en JavaScript?
1 ¿Cómo puedo crear un componente Svelte que use propiedades de un componente anidado?
3 Filtrar una matriz en el bucle forEach
1 Reemplazar cada nombre en un archivo por su traducción de Google
1 ¿Cómo dibujar un GIF en un lienzo?
1 cómo importar una matriz desde un archivo json en vanilla javascript
Nuevas preguntas con la etiqueta javascript >

javascript

Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.

Más sobre javascript...