jQuery를 사용하여 클릭시 구두점 제거하기

Question

나는 체크 박스를 통해 루프를 설정하고 아코디언 메뉴 상단에 결과 목록을 만듭니다. 각 용어 옆에있는 X를 클릭하면 자신을 삭제하고 해당 용어와 연결된 상자의 선택을 취소합니다. 그러나 목록의 시작 부분에있는 쉼표와 콜론을 분리하면 태그가 제거 될 때까지 남아 있습니다. 나는이 문제를 다루기 위해 무거운 수작업 방법이 있지만, 훨씬 깨끗하고 빠를 수 있다고 느낀다. 그러나 내가 생각해 낸 해결책은 나에게 구문 오류를 계속 제공한다.

var divBlock = $(this).closest("h3 + div"); //finds parent h3 + div 
aObject = divBlock.prev().find("a:first"); //gets the a link in the h3 
originaltitle = aObject.html(); 

var liItems = divBlock.find("li"); 
for (var i = 0; i < liItems.length; i++) { 
    if (liItems[i].childNodes[0].checked) { 
     var searchterm = liItems[i].childNodes[1].innerHTML; 
     categoryString += "<div class='choice'>" + searchterm + "<a href=\"javascript:void(0);\" class=\"delete_search_term\" id=\"close_" + searchterm.replace(/\s/g, "-") + "\">(x)</a>,</div> "; 
    } 
} 

if (originaltitle.indexOf(": ") > 0) { 
    originaltitle = originaltitle.substring(0, originaltitle.indexOf(":")); 
} 

if (categoryString.length > 0) { 
    categoryString = categoryString.substring(0, categoryString.lastIndexOf(",")) + "</div>"; 
    aObject.html(originaltitle + ": " + categoryString); 
} else { 
    aObject.html(originaltitle.replace(":", "").trim()); 
} 

이 코드는 문자열의 생성과 구두점의 배치를 처리하여 목록의 형식을 지정합니다. 다음 코드는 내 서브 코드를 주석 처리하지 않으면 오류를 throw하는 모든 종류의 mish-mash를 수행합니다.

$("a.delete_search_term").click(function() { 
    window.location = $(this).attr('href'); 
    var itemName = this.id.replace("close_", "").toLowerCase(); 
    var liItems = $(this).closest("h3").next().find("li"); 
    for (var i = 0; i < liItems.length; i++) { 
     if (liItems[i].childNodes[0].id == itemName) { 
      liItems[i].childNodes[0].checked = false; 
     } 
    } 
    if (categoryString.length > 0) { 
     categoryString = categoryString.substring(categoryString.lastIndexOf(",")); 
     subsub = categoryString.substring(0, 1); 
     $(subsub).remove(); 
    } 
    $(this).parent().remove(); //Removes parent of selected object only 
    return false; 
}); 

요청에 의해 JSFiddle을 만든 : http://jsfiddle.net/w4AxR/1/

Answer 1

나는 당신의 바이올린을 쓰다듬어 코드를 수정했습니다. 사용자가 선택한 입력에 클래스를 사용하여 프로세스를 상당히 단순화 할 수 있습니다.

변경 사항에 대한 H3의 목록을 조작하는 대신 코드를 입력에 대한 클래스를 관리하고 모든 변경 사항에 대해 목록을 다시 작성했습니다.

코드는 훨씬 더 단순하게 :

var updateChoices = function() { 
    var container = $(".acat1"); 

    container.text('Food Categories: '); 
    $('li.selected input').each(function() { 
     var searchterm = $(this).next().text(); 
     var element = $('<div />').addClass('choice').text(searchterm).append(
      $('<a />').addClass('delete-search-term').attr('id', 'remove_' + this.id).text('(x),') 
     ); 
     container.append(element); 
    }); 
    var lastChoice = container.find('.choice:last'); 
    lastChoice.html(lastChoice.html().replace(",", "")); 
} 

$('.check').click(function() { 
    if (this.checked) $(this).parent().addClass('selected'); 
    else $(this).parent().removeClass('selected'); 

    updateChoices(); 
}); 

$("a.delete-search-term").live('click', function() { 
    $('#' + this.id.replace('remove_', '')) 
     .attr('checked', false) 
     .parent().removeClass('selected'); 

    updateChoices(); 

    return false; 
}); 

전체 예 : jsfiddle

현재 사용자가 제공 한 jsfiddle은 JQuery와 1.6.4를 사용했다, 즉 의도적 있는지 확실하지 않습니다. 그렇다면 이벤트 바인드에 대한 지원을 .on()으로 업그레이드하는 것이 좋습니다. 아직 지원되지 않았으므로 .live()을 사용했습니다.

편집 : 필터를 추가하고 필터를 제거하면 동일한 기능을 사용하여 목록을 채 웁니다.

Answer 2

subsub = categoryString.substring(0,1); 
$(subsub).remove(); 

문자열이 subsub는 ID를 포함하는 경우 ...... 선택을 필요로 $(X).remove() 문자열을 반환 할

$('#'+subsub).remove(); 

또는 클래스 문자열

$('.'+subsub).remove(); 

[EDIT] 실제로 .... 부분 문자열 (0,1)은 단일 문자를 반환합니다 .... 그런 의미입니까?