그들은 HTML의 자바 스크립트 코드가 나쁜 습관이라고 생각했는데, 어떻게 해결할 수 있습니까?

Question

그래서 HTML로 자바 스크립트를 섞어도 머리가 나쁘다는 것을 이해합니다. 하지만이 코드를 볼 수 있습니다 (목록에서 항목을 제거하고 싶습니다)

. 
. 
. 
<div>item1 <a href="#" onclick="return deleteThisItemById (1);">delete me</a><br /> 
<div>item4 <a href="#" onclick="return deleteThisItemById (4);">delete me</a><br /> 
<div>item5 <a href="#" onclick="return deleteThisItemById (5);">delete me</a><br /> 
. 
. 
. 

이 목록은 PHP에 의해 생성되었습니다. deleteThisItemById()는 외부 .js 파일에 있습니다. 여전히 나쁜가? 그렇다면 정식 솔루션은 무엇입니까? 원시 자바 스크립트와 마찬가지로 jQuery도 사용할 수 있습니다.

Answer 1

$(function() { 
    $('a#my_id1').click(function() { 
    var myId = $(this).attr('id'); 
    return deleteThisItemByID(myId); 
    }); 
}); 

<div> 
    item1 
    <a id="my_id1" href="#">delete me</a> 
</div> 

그런데 HTML이 잘못되었습니다. 부적절하게 div 태그를 중첩했습니다.

Answer 2

간단한 ...

<div>item1 <a href="#" class='deleteMe'>delete me</a><br /></div> 
<div>item4 <a href="#" class='deleteMe'>delete me</a><br /></div> 
<div>item5 <a href="#" class='deleteMe'>delete me</a><br /></div> 

그런 다음

$('.deleteMe').on('click', function(event) { 
    $(this).remove(); 
}); 

jQuery를

와 요소를 대상으로 (그 하나 개의 항목 만있는 경우에만 ID를 사용하는) 당신은 클래스 또는 ID 을 제거 할 항목을 제공

참고 ... 전체 div를 삭제하려면이 선택 도구를 사용하십시오.

$('.deleteMe').closest('div').on('click', function(event) { 
    $(this).remove(); 
}); 

Answer 3

이 작업을 수행하려면 addEventListener를 사용할 수 있습니다. 그리고 더 JS-코드가 HTML로 수 없습니다 : 그러나

var elems = document.querySelectorAll("div.removable"); 
for(var i=0;i<elems.length;i++){  
    elems[i].querySelector("a").addEventListener("click",function(e){ 
     var toRemove = this.parentNode; 
     var parent = toRemove.parentNode; 
     parent.removeChild(toRemove); 
    },false); 
} 

, 나는 div의 반복, 그래서 나는 이것에 대한 클래스를 추가 :

이

<div> 
    <div class="removable">item1 <a href="#">delete me</a></div><br /> 
    <div class="removable">item2 <a href="#">delete me</a></div><br /> 
    <div class="removable">item2 <a href="#">delete me</a></div><br /> 
</div> 

이 fiddle

에서보세요

Answer 4

나는 그 객체를 나타내는 dom 요소의 "data-"속성에 id와 비슷한 메타 데이터를 숨기려고한다. "

$('.posts').on('click', '.actions .delete', 
function() { 
    // which post should be deleted? 
    var $post = $(this).closest('.post'); 
    // remove the DOM element 
    $post.remove(); 
    // some sort of ajax operation 
    $.ajax({ 
    // url, dataType, etc 
    data: { post_id: $post.data('id') } 
    }); 
}); 

이 하나의 핸들러 모두에 적용됩니다 : 나는 보통의 .js 파일에 그런 비슷한 설정

<ul class="posts"> 
    <li class="post" data-post="####"> 
    <p>content...</p> 
    <ul class="actions"> 
     <li> 
     <a class="delete">delete</a> 
     </li> 
    </ul> 
    </li> 
</ul> 

를 사용합니다이 경우

는 페이지 하단에 포함 .action "요소를 주 목록에 추가합니다. 즉, ajax를 사용하여 목록을 수정하거나 시간을 추가하는 로더 또는 페이지 매김을 추가하려는 경우 하나의 이벤트 핸들러가 여전히 훌륭하게 작동합니다.