僅單擊按鈕而不是所有 div 時如何刪除元素

Question

按下刪除按鈕時如何刪除元素？ 但是當我按下 div 中的任何位置時，這里發生了什么，div 將刪除

我正在嘗試僅使用按鈕刪除

<script>
  function myexfun(mySelectID, selectedItem, myDIVId) {
    var x = document.getElementById(mySelectID).value;
    $('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">' + x + '</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm()" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>');
    // bd.style.display = "block";

  }
</script>
<script>
  function delelm() {
    $(document).on("click", '#childcur', function() {
      $(this).remove();
    });
  }
</script>

我嘗試了很多但我無法從按鈕中刪除它只需單擊 div

Answer 1

您的單擊事件偵聽器附加到整個 div，這就是為什么每當您單擊 div 內的任何地方時它都會刪除的原因。 由於您有delelm() ，您可以修改如下代碼以將單擊限制為僅刪除按鈕。

 $('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">1</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm(this)" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>'); function delelm(el) { $(el).closest('#childcur').remove(); }

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <div id="parentcur"></div>

Answer 2

您的問題是您的目標是點擊#childcur div 而不是兒童。

下面是如何做到這一點的一個例子：

HTML：

<div id="container">
  <div class="deletable">
    <p>A</p>
    <button class="do-delete">Delete</button>
  </div>

  <div class="deletable">
    <p>B</p>
    <button class="do-delete">Delete</button>
  </div>

  <div class="deletable">
    <p>C</p>
    <button class="do-delete">Delete</button>
  </div>
</div>

JS：

// target buttons within the divs we want to be deletable.
$('div.deletable > button.do-delete').on('click', function() {
    // when the button is clicked, access the parent and remove it from the DOM.
    $(this).parent().remove();
})

這是一個小提琴： https : //jsfiddle.net/7aro46et/