Как скрыть любой элемент DOM

Question

Я хочу скрыть любой элемент, который нажал. Например, если щелкнуть <p></p>, он должен скрыть, или если щелкнуть <div></div>, он должен скрыться. Я попытался использовать:

$(document).ready(function(){ 
    $("*").click(function(){ 
     $(this).hide(); 
    }); 
}); 

Однако это скрывает все элементы, если щелкнуть один элемент.

Как я могу достичь того, что я описал?

Answer 1

Событие будет пузыриться до DOM, пока оно не достигнет document, а затем все будет скрыто. Вы можете остановить это бульканье с помощью stopPropagation на событие:

$("*").click(function(e) { 
    e.stopPropagation(); 
    $(this).hide(); 
}); 

отметить также, что это не очень хорошая идея, чтобы добавить обработчик событий каждый элемент в DOM, как там может быть тысячи. Вместо этого связать один обработчик для делегирования в document с помощью событий:

$(document).on('click', '*', function(e) { 
    e.stopPropagation(); 
    $(this).hide(); 
}); 

Example fiddle

Answer 2

В качестве альтернативного способа e.stopPropagation();, Вы также можете скрыть только целевой элемент:

$("*").click(function(e) { 
    $(e.target).hide(); 
});