JavaScript
Article

jQuery Find and Remove Duplicated Element IDs

By Sam Deering

This example could be used to fix a featured article for your blogs so that not more than one article is featured on the homepage.

// featured article fix
var myFeatured = $('div.featured').attr('id');
var theHidden;
$('div.article').each(function(){
	theHidden = $(this).attr('id');
	if(theHidden == myFeatured){ 
		$('div#'+theHidden).hide();	
	}
});
  • Pingback: jQuery Find and Remove Duplicated Element IDs « « Big Engine Media Big Engine Media()

  • hii

    lol

    • prasanna sekar

      Hi,
      I have 2 button with same id and class. How can i remove the duplicate one using either css or js.

      $(‘button’).remove(); removes both the elements. Please help

      Thanks in advance,

  • Warly

    Hi Sam,

    I am currently dealing with JQuery problem. I have a very limited knowledge on using it. I am creating a file browser application using Jquery and laravel.
    However, I encountered error on duplicate file with the following scenarios.

    1. If I double click the folder. The appended folders and files are duplicated or tripled.
    2. If I press the Enter very fast to acknowledge my alert. The appended folders and files are duplicated or tripled.
    3. This happens mostly on CHrome.
    4. In forefox. ts only intermittent.
    5. Also, Im trying to create the show and hide fuction when I clicked the add and minus sign but my code didnt work.

    hope ypu could help me know what is the problem.
    really appreciateyour help.

    below are my Jquery codes.
    $(function(){

    $(“#homedirs”).delegate(“#homefolder”, “click”, function(event){
    event.preventDefault();
    event.stopPropagation();
    var location = $(this).attr(‘id’);
    var directory = $(this).find(‘img’).attr(‘id’);
    var projectId = $(this).find(‘img’).attr(‘class’);
    var mydivs = $(“div a#homefolder”);
    var subDir = $( this ).find(‘span’).attr(‘id’);
    var filecheck1 = $(this).siblings().is(‘.contentFolders’);
    var filecheck2 = $(this).siblings().is(‘.contentFiles’);

    getmain(projectId, directory);

    $(“#homedirs”).delegate(“.contentFolders”, “click”, function(event){
    event.preventDefault();
    event.stopPropagation();
    var projectId = $(‘#homefolder’).find(‘img’).attr(‘class’);
    var contentdivs = $(“.contentFolders”);
    var location = $(this).find(‘a’).attr(‘id’);
    var nextSubDir = $(this).attr(‘id’);
    var parentDirectory = $(this).find(‘img’).attr(‘id’);
    var refDirectory = $(this).children().attr(‘class’);
    var childDirectory = $(this).attr(‘id’);

    var filecheck1 = $(this).children().is(‘.contentFolders’);
    var filecheck2 = $(this).children().is(‘.contentFiles’);

    var filecheck3 = $(this).children().next().is(‘.contentFolders’);
    var filecheck4 = $(this).children().next().is(‘.contentFiles’);
    var filecheckFolderA = ($(this).children().next().attr(‘id’));
    var filecheckFolderB = ($(this).children().next().attr(‘class’));

    alert(“HTML : ” +$(this).html());
    alert(“CHECKER: ” +$(this).children().next().html());
    alert(“FILECHECK 3 : ” + $(this).children().next().attr(‘id’));
    alert(“FILECHECK 4 : ” + $(this).children().next().attr(‘class’));

    if(!($(this).children().next().attr(‘class’))){
    alert(“FILECHECK 3 : ” + $(this).children().next().attr(‘id’));
    alert(“FILECHECK 4 : ” + $(this).children().next().attr(‘class’));
    getsub(location, projectId, parentDirectory, childDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB);
    }

    });

    function getmain (id, mainDirectory){

    var dirname = mainDirectory;
    var id = id;
    getDirectoryList(null, id, dirname);
    }

    function getsub (locate, id, mainDirectory, subDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){

    var dirname = mainDirectory;
    var id = id;
    getDirectoryList(locate, id, dirname, subDirectory, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB);
    }

    function getDirectoryList(locate, id, mainDir, subDir, nextSubDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){

    var nextSubDir = nextSubDir;
    var filecheck1 = filecheck1;
    var filecheck2 = filecheck2;
    var filecheckFolderA = filecheckFolderA;
    var filecheckFolderB = filecheckFolderB;
    var refDirectory = refDirectory;

    if(locate){
    var hostname = “https://info.tmj.jp/dev2-sync/index.php/getsub/”;
    var dirpage = $.trim(hostname+id+’?dir=/’+mainDir+subDir);
    }else{
    var hostname = “https://info.tmj.jp/dev2-sync/index.php/getsub/”;
    var dirpage = $.trim(hostname+id+’?dir=/’+mainDir);
    }
    // alert(dirpage);
    $.getJSON( dirpage, function(data){

    var directorycount = [];
    var directories = [];
    var filedetails = [];
    var filecount = [];
    var isCondir = [];
    var dirNames = [];
    $.each(data, function(key, val){

    directorycount.push(val.foldercnt);
    filecount.push(val.filecnt);
    isCondir.push(val.dotdotdir);

    for (var i = 0; i<directorycount; i++){
    directories.push(foldersDisplay(val.folderDetail[i], val.homefolderName[i]));
    dirNames.push(val.homefolderName[i]);
    };
    for (var i = 0; i<filecount; i++){
    filedetails.push(filesDisplay(val.fileDetail[i]));
    };
    });

    if (isCondir != "/") {
    displaySubDirectories(directories, filedetails, directorycount, filecount, dirNames, nextSubDir, mainDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB)
    }else{
    displayHomeDirectories(directories, filedetails)
    }

    });
    }

    function displayHomeDirectories(directories, filedetails){

    for (var i = 0; i < mydivs.length; i++){
    var parentDir = ($(mydivs[i]).find('span').attr('id'));
    if(subDir === parentDir){
    if((!filecheck1) && (!filecheck2)){
    $('div a#homefolder')
    .filter(function( index ){
    return index === i;
    }).after(filedetails)
    .after(directories);
    }
    }
    }
    }

    function displaySubDirectories(directories, filedetails, directorycount, filecount, dirNames, nextSubDir, mainDir, filecheck1, filecheck2, refDirectory, filecheckFolderA, filecheckFolderB){
    var contentdivs = $("div a#contentFolders").filter('.'+refDirectory);

    if((!filecheckFolderA) && (!filecheckFolderB)){
    for (var i = 0; i<contentdivs.length; i++){
    var parentDir = ($(contentdivs[i]).children().next().next().attr('id'));
    if(nextSubDir === parentDir){
    if((!filecheck1) && (!filecheck2)){
    $("div a#contentFolders").filter('.'+refDirectory).eq(i).after(filedetails).after(directories);
    }
    }
    }
    }
    }

    function showhide(){
    /*If the image is plus. When the sublink is clicked. Below function will change the plus image to minus*/
    if($('.homefolder img#showhide').hasClass('plus')){
    $('.homefolder img#showhide').removeClass('plus');
    $('.homefolder img#showhide').addClass('minus');
    }

    /*Below image will toggle or hide and show the subdir linnk list.*/
    $(".homefolder img").click(function(event){
    event.preventDefault();
    if($('.homefolder img#showhide').hasClass('minus')){
    $('.homefolder img#showhide').removeClass('minus');
    $('.homefolder img#showhide').addClass('plus');

    }else {
    $('.homefolder img#showhide').removeClass('plus');
    $('.homefolder img#showhide').addClass('minus');
    // $('.contentFolders').show();
    // $('.contentFiles').show();
    }
    if($('.contentFolders img#showhide').hasClass('plus')){
    $('.contentFolders img#showhide').removeClass('minus');
    $('.contentFolders img#showhide').addClass('plus');
    // $('.contentFolders').hide();
    // $('.contentFiles').hide();
    }else {
    $('.contentFolders img#showhide').removeClass('minus');
    $('.contentFolders img#showhide').addClass('plus');
    // $('.contentFolders').show();
    // $('.contentFiles').show();
    }

    });

    }

    jQuery.fn.appendEach = function( arrayOfWrappers ){
    var rawArray = jQuery.map(
    arrayOfWrappers,
    function( value, index ){
    return( value.get() );
    });
    this.append( rawArray );
    return( this );
    };

    function foldersDisplay(directorynames, newId) {
    return (
    $( "” + directorynames + “” ).css({“margin-left”:”20px”})
    // $(“”)
    );
    }

    function filesDisplay(filenames) {
    return (
    $( “” + filenames + “” ).css({“margin-left”:”20px”})
    );
    }
    });

    });

    • James Hibbard

      Hi,
      Disqus is a lousy place to discuss code problems. You stand a much better chance of getting an answer if you post your question in our JavaScript forum: http://community.sitepoint.com/c/javascript

      • Warly

        Thank you so much James. :)

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.