按刪除按鈕時如何刪除父div

Question

我正在嘗試創建一個刪除按鈕，它將刪除其父div及其內部的所有內容

 function remove() { var $this = $(this).closest(); //console.log($this) $this.remove(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="background-color: green;"> <div>NAME</div> <div><button onclick="remove">Remove</button> </div> </div> 

但是，每當我按下按鈕時，都不會發生任何事情。

編輯：

 $(function() { $('button').click(function() { var $this = $(this).closest('.container'); $this.remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div>NAME 1</div> <div><button>Remove</button></div> </div> <div class="container"> <div>NAME 2</div> <div><button>Remove 2</button></div> </div> 

什么也沒有發生，也沒有錯誤發生。

編輯2：

這是我的整個javascript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script type="text/javascript">
var csrftoken = Cookies.get('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
var suggested_students = $("#suggested_students");
var search_bar = $('#search_bar');

function clear(){
    suggested_students.empty(); 
    search_bar.val('');
}

search_bar.keyup(function () {

    var keyword = search_bar.val();
    if(keyword.length > 2){
        //console.log('hey')
        var url = window.location.pathname;
        $.ajax({
            method: 'GET',
            url: url,
            data: {
            'keyword': keyword,
            },
            dataType: 'json',
            success: function (data) {
                suggested_students.empty(); 
                var suggestions = data.students;
                for(i = 0; i< suggestions.length; i++){
                    var current_student = suggestions[i];
                    var div = $("<a href='#'><div/></a>");
                    div.data("name", current_student[0]);
                    div.data("id", current_student[1]);
                    div.html(current_student[0] + "<br/>");
                    div.on("click", moveProfile);
                    div.css({"background-color": "green"});
                    suggested_students.append(div);
                }
            }
            })
        }else if(keyword.length == 0){
            clear()

        }
    })

var students_to_add = $("#students_to_add")

function moveProfile(){
    var $this = $(this);
    var studentID = $this.data("id");
    var studentName = $this.data("name");
    var div = $("<div/>");
    div.data('id', studentID);
    div.data('name', studentName);
    div.html("<div>" + studentName +"</div><div><button>Remove</button></div>");
    div.css({"background-color": "green"});
    div.addClass("container")
    students_to_add.append(div);    
    clear()
}


$(function() {
    $('button').click(function() {
      var $this = $(this).closest('.container');
      $this.remove();
    });
  });


</script>

這是整個HTML：

<div>
    <label>Set Name: </label>
    <input type="text" class="class_name" id='class_name'/>
</div>
<br>

<div class='student_search_bar'>
    <label for='search_bar'>Search for Students: </label>
    <input type="text" class="student_search_bar_bar" id='search_bar'/>   
</div>
<br>
<div id='suggested_students'>

</div>

<div id='students_to_add'>
    <label>Students to add: </label>

</div>

我有一個函數可以從AJAX調用中獲取列表，並將其分成多個div，如下所示：

<div class="container">
  <div>NAME</div>
  <div>
    <button>Remove</button>
  </div>
</div>

我的Javascript在我的html下面，並且都在同一個文件中。

當我運行Rory McCrossan建議的代碼時，在控制台中不會出現任何錯誤，並且當我使用console.log查看是否調用了該函數時，不會打印任何內容。

Answer 1

使用on*事件屬性時， this引用將是窗口，而不是單擊的元素。 另外， closest()需要選擇器。

要解決此問題，請在button附加一個不引人注目的事件處理程序。 在動態附加button元素時，需要使用委托事件處理程序，如下所示：

 $(function() { $('#students_to_add').on('click', 'button', function() { var $this = $(this).closest('.container'); $this.remove(); }); }); 

 .container { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="students_to_add"> <div class="container"> <div>NAME</div> <div> <button>Remove</button> </div> </div> <div class="container"> <div>NAME</div> <div> <button>Remove</button> </div> </div> <div class="container"> <div>NAME</div> <div> <button>Remove</button> </div> </div> </div> 

Answer 2

您可以將此代碼更改為以下內容

<div id="box" style="background-color: green;">
    <div>NAME</div>
    <div><button data-remove="#box">Remove</button>
    </div>
</div>

通過以下代碼，您可以對具有data-remove屬性的所有元素采用通用方法

$(function() {
    $('[data-remove]').on('click', function() {
        $($(this).data('remove')).remove();
    });
});

如果要使用closest ，則應添加適當的類以標識要處理的元素。

<div class="box" style="background-color: green;">
    <div>NAME</div>
    <div><button class="close-box">Remove</button>
    </div>
</div>

用這個腳本

$(function() {
    $('.close-box').on('click', function() {
        $(this).closest('.box').remove();
    });
});

Answer 3

您需要在closest()傳遞選擇器

HTML

<button onclick="remove(this)">Remove</button>
                   ----^^^^^^---- here

Java腳本

function remove(ele){
    var $this = $(ele).closest('div');
    //console.log($this)
    $this.remove();

}

但是，這將從按鈕中刪除最接近的div。 我不確定要刪除哪個div。 您可以為要刪除的div提供一個ID，然后改用它。

例如：

<div style="background-color: green;" id="some-id">

var $this = $(ele).closest('#some-id');

更好的方法：

$('button').click(function() {
  var $this = $(this).closest('div');
  $this.remove();
}); 

Answer 4

為此功能提供適當的括號，如下所示。

<div><button onclick="remove()">Remove</button>