無法移除父div

Question

我正在開發一個項目，在那裏我從輸入標記獲取一個值，然後在div中插入輸入值並在屏幕上添加子元素。

而我想要的是，當用戶點擊children元素，然後父div將被刪除，爲此我使用了一個函數。這是工作時，我默認情況下使用一節，但當我追加一節，然後點擊那裏的一個函數調用時，像用戶點擊它的孩子父節會被刪除，但我的功能不起作用的兒童。

$('#btn').click(function() { 
 
    var menuFieldName = $('#text').val(); 
 
    $('.div').append('<div class="a">' + menuFieldName + '<span>X</span></div>'); 
 
    $('#text').val(''); 
 
}); 
 

 
$('.div .a span').on('click', function() { 
 
    $(this).parent().remove(); 
 
});

.a { 
 
    display: inline-block; 
 
    padding: 5px 35px 5px 10px; 
 
    position: relative; 
 
    background: #eee; 
 
    border-radius: 20px; 
 
    margin: 10px; 
 
} 
 

 
.a span { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background: #333; 
 
    color: #fff; 
 
    height: 28px; 
 
    width: 28px; 
 
    text-align: center; 
 
    line-height: 28px; 
 
    border-radius: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div"> 
 
    <div class="a">Test <span>X</span></div> 
 
</div> 
 

 
<input type="text" id="text"> 
 
<button id="btn">Add</button>

https://jsfiddle.net/jafaruddeen/rag71ma0/

Answer 1

要動態附加元素，但你沒有連接任何事件處理新添加的元素。爲了解決這個問題，你可以使用事件委派，您可以將事件.div像$('.div').on('click', '.a span', function() {

$('#btn').click(function() { 
 
    var menuFieldName = $('#text').val(); 
 
    $('.div').append('<div class="a">' + menuFieldName + '<span>X</span></div>'); 
 
    $('#text').val(''); 
 
}); 
 

 
$('.div').on('click', '.a span', function() { 
 
    $(this).parent().remove(); 
 
});

.a { 
 
    display: inline-block; 
 
    padding: 5px 35px 5px 10px; 
 
    position: relative; 
 
    background: #eee; 
 
    border-radius: 20px; 
 
    margin: 10px; 
 
} 
 

 
.a span { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background: #333; 
 
    color: #fff; 
 
    height: 28px; 
 
    width: 28px; 
 
    text-align: center; 
 
    line-height: 28px; 
 
    border-radius: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="div"> 
 
    <div class="a">Test <span>X</span></div> 
 
</div> 
 

 
<input type="text" id="text"> 
 
<button id="btn">Add</button>

Answer 2

無法刪除的原因，是因爲當你註冊事件，元素上你嘗試註冊它還不存在。

您需要使用event delegation

$('body').on('click', '#my-element', function(){...}); 

Answer 3

你必須調用點擊後追加功能..或致電單擊全局函數（body元素），並匹配跨度..

$(document).ready(function(){ 
     $('#btn').on('click',function(){ 
      var menuFieldName = $('#text').val(); 
      $('.div').append('<div class="a">'+menuFieldName+'<span class="close">X</span></div>'); 
      $('.div .a span').on('click', a); 
      $('#text').val(''); 
     }); 

      $('.div .a span').on('click', a);  
    function a() { 
     $(this).parent().remove(); 
    } 
}); 

檢查js小提琴。修復它 - >https://jsfiddle.net/jafaruddeen/rag71ma0/