Выберите каждый новый элемент A

Question

У меня есть страница, где изображения загружаются автоматически. Эти изображения включены в элемент <a>. Мне нужно найти и удалить все элементы <a>, кроме тех, которые содержат класс .private_overlay. Я создал для этого очень простого кода:

$('#content a').not($('a').find('div.private_overlay').parent()).remove(); 

Он работает, когда я запускаю его вручную. Но он не работает с элементами, которые загружаются при запуске скрипта.

Я попытался петли таким образом:

$(window).scroll(function() { 
    $('#content a').not($('a').find('div.private_overlay').parent()).remove(); 
}); 

Он работает, в некотором смысле. Но это не то, что я ожидаю. Этот скрипт должен запускаться одним щелчком мыши.

Я просто хочу, чтобы применить к работе над новыми элементами на этой странице:

Есть много блоков сообщений. Я ищу сообщения, помеченные как частные. С этой целью я должен скрыть все непомеченные сообщения, в том числе те, которые еще не загружены.

Вот как это выглядит и работает на данный момент:

Мне нужно знать, как выбрать новые элементы, как это мне еще нужно было найти следующее или предыдущее изображение.

я вставил ниже код:

function searchBox() { 
    $('body').append('<div id="searchBox"><p style="margin: 0px;"><strong>Wyszukiwarka prywatnych postów:</strong></p> \ 
<p style="margin: 5px auto; text-align: center"><input id="previousPost" type="button" value="Poprzedni post"></input> \ 
<input id="nextPost" type="button" value="Następny post"></input></p> \ 
<p style="margin: 0px;"><input id="hidePosts" type="checkbox"></input><label for="hidePosts" style="vertical-align: bottom;">Kasuj niepotrzebne posty</label></p></div>'); 

    $('#searchBox').css({ 
    position: 'fixed', 
    left: '20px', 
    bottom: '20px', 
    background: 'white', 
    color: 'rgb(125, 125, 125)', 
    fontSize: '13px', 
    border: '1px solid rgb(125, 125, 125)', 
    borderRadius: '7px', 
    padding: '7px', 
    zIndex: '9999', 
    boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.3)', 
    display: 'none' 
    }).fadeIn(); 

    $('#hidePosts').one('click', function() { 
    $(window).scroll(function(){ 
     $('#content a').not($('a').find('div.private_overlay').parent()).remove(); 
    }); 
    $(this).attr('disabled','disabled'); 
    }); 

    $('#previousPost').click(function() { 
    $('html, body').stop().animate({ 
     scrollTop: $("#content a").prev().offset().top 
    }, 2000); 
    }); 

    $('#nextPost').click(function() { 
    $('html, body').stop().animate({ 
     scrollTop: $("#content a").next().offset().top 
    }, 2000); 
    }); 
}; 

Я пытался понять this article, но я не понимаю.

Answer 1

ОК, через беседу в комментариях, вы хотите, чтобы все экземпляры <a>, которые не имеют класса private_overlay, должны быть удалены мгновенно, когда пользователь нажимает кнопку. Итак, во-первых, код удаления может быть упрощен.

$('#content a').not('a.private_overlay').remove(); 

Второй ... все, что нам нужно сделать, это вызвать это действие, когда пользователь нажмет кнопку.

$('button#remove').click(function() { 

    $('#content a').not('a.private_overlay').remove(); 

}); 

Это будет работать даже на динамически вставленном содержимом, как показано в Fiddle.

Working Fiddle