jQuery 잘못된 방법 제거

Javascript/jQuery를 처음 사용하고 사용자 입력을 기반으로 테이블에 항목 목록을 작성하려고합니다.jQuery 잘못된 방법 제거

사용자가 텍스트를 양식에 입력하면 js/jQuery는 해당 데이터를 캡처하여이를 boostrap4 테이블에 행으로 표시합니다. 사용자가 입력하면, 그것은 (이미지 참조) 그러나, 이렇게 할 경우 해당 사용자 일 필요 연속으로 데이터를 추가하도록

는 알겠습니다 빨간색 "제거"버튼을 클릭하면 전체 테이블 행이 제거됩니다. 지금 버튼을 클릭하면 버튼이 제거됩니다 (세 번째 이미지 참조).

<div class="tab-pane fade" id="watchlist" role="tabpanel" aria-labelledby="watchlist-tab"> 
        <h2 class="display-4">Watch List</h2> 
        <p class="lead">Add series to your watch list and receive an e-mail notification when new data is available.</p> 
        <p class="card-text"> 
        <div class="form-check form-check-inline"> 
         <span class="mr-2">How would you like to receive your e-mail notifications?</span> 
         <label class="form-check-label" data-toggle="tooltip" data-placement="top" title="Get email updates on your series bundled in one single daily email."> 
         <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Daily Digest 
         </label> 
        </div> 
        <div class="form-check form-check-inline" data-toggle="tooltip" data-placement="top" title="Get an email instantly when new data is released. You will not get a second email until you've downloaded the most recent data."> 
         <label class="form-check-label"> 
         <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Individually 
         </label> 
        </div> 
        </p> 
        <p class="card-text mt-2"> 
        <form class="add-items"> 
         <div class="form-row align-items-center"> 
          <div class="col-md-6"> 
          <input type="text" class="form-control mb-2 mb-sm-0" id="watchlist-item" placeholder="Search series by name or symbol..."> 
          </div> 
          <div class="col-auto"> 
          <button type="submit" class="btn btn-dark" style="margin-left:-12px">Add to Watch List</button> 
          </div> 
         </div> 
         </form> 
        </p> 
        <p class="card-text"> 
        <table class="table table-sm table-hover"> 
         <thead> 
         <tr> 
          <th scope="col">Symbol</th> 
          <th scope="col">Name <i class="ml-4 fa fa-sort" aria-hidden="true"></i></th> 
          <th scope="col">New Data? <i class="ml-4 fa fa-sort" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Sort data by latest release."></i></th> 
          <th scope="col"></th> 
         </tr> 
         </thead> 
         <tbody id="table-items"> 

         </tbody> 
        </table> 
        </p> 
       </div> 
       </div>

내 jQuery를 다음과 같습니다 : 여기

내 HTML입니다

$(document).ready(function() { 


    $('.add-items').submit(function(event) { 
    event.preventDefault(); 

    var item = $('#watchlist-item').val(); 

    if (item) { 
     $('#table-items').append("<tr>S<td>" + item + "</td><td>S&P 500 Total Return Index</td><td><button class='btn btn-info'>Get Data</button></td><td><button class='btn btn-danger remove'>Remove</button></td></tr>") 
     $('#watchlist-item').val(""); 
    } 
    }); 

    $(document).on("click", ".remove", function() { 
     $(this).parent().remove(); 
    }); 

});

출처

2017-12-14 J.G.Sable

그래서 행을 선택 .... – epascarello

버튼은 부모가 td 아닌 tr 그래서하는 td에 . .parent() 두 번 전화를 걸어 또는 .closest("tr")

출처

2017-12-14 18:30:53

(큐 공기 기타 소리) – Seano666

jQuery 잘못된 방법 제거

답변

관련 문제