如何刪除特定的按鈕？

你好我對編碼有點新，所以如果我不理解你使用的一些術語，那麼請耐心等待。如何刪除特定的按鈕？

所以基本上我有2個按鈕，其功能是添加和刪除按鈕。一旦添加了按鈕，按鈕的功能就是顯示用戶的位置。

當前按鈕被最後一個按鈕刪除。我如何選擇刪除特定的按鈕？

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <style> 
    button{ 
    height:100px; 
    width: 80px; 
    text-align: center; 
    margin: 5px 4px; 
    } 
    #mainButtons button{ 
    display: inline-block; 
    margin: auto; 
    } 
    </style> 


<div id="mainButtons"> 
<button onclick="addButton()">Add Contact</button> 
<button onclick="removeButton()">Remove Contact</button> 
</div> 
    </br> 
<div id="que"></div> 

<script> 
var increment = 0; 
function addButton(){ 
    var id = 'btn' + (increment++); 
    var que = $("#que"); 
    var el = $("<button id='"+id+"'>Click for location</button>"); 
    que.append(el); 
    clickHandler(el); 
} 

function removeButton(){ 
    if (increment >= 0) { 
    $("#btn"+(increment-1)).remove(); 
    increment--; 
    } 
} 

    function clickHandler(el) { 
    el.click(function() { 
    getLocation(el); 
    }); 
} 

function getLocation(el) { 
    el.html("Loading...."); 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { showPosition(el, position); }); 
    } else { 
    el.html("Geolocation is not supported by this browser."); 
    } 
} 

function showPosition(el, position) { 
    el.html("Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude); 
} 


</script> 
</body> 
</html>

來源

2017-08-19 Jai Fiz

通過這個'$（「＃BTN」 +（增量-1）），刪除（）;'你已經與ID'BTN1/2/3刪除特定鍵.. 。' –

它被用來刪除最後一個按鈕等，如果我可以有一個功能，使我可以刪除我選擇的那個按鈕，那將會很好 –

你將如何定位你想要刪除的特定按鈕？通過ID？ –

你可以用多種方法做到這一點，我設法做到這一點。

var increment = 0; 
 
function addButton(){ 
 
    var id = 'btn' + (increment++); 
 
    var que = $("#que"); 
 
    var el = $(`<button id='${id}'>Click for location(id:${id})</button>`); 
 
    que.append(el); 
 
    clickHandler(el); 
 
} 
 

 
function removeButton(id){ 
 
    if (increment >= 0) { 
 
    $(`button#${id}`).remove(); 
 
    
 
    } 
 
} 
 

 
    function clickHandler(el) { 
 
    el.click(function() { 
 
    getLocation(el); 
 
    }); 
 
} 
 

 
function getLocation(el) { 
 
    el.html("Loading...."); 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { showPosition(el, position); }); 
 
    } else { 
 
    el.html("Geolocation is not supported by this browser."); 
 
    } 
 
} 
 

 
function showPosition(el, position) { 
 
    el.html("Latitude: " + position.coords.latitude + 
 
    "<br>Longitude: " + position.coords.longitude); 
 
} 
 

 

 
document.getElementById('removeButton').addEventListener('click',function(){ 
 
    
 
    var input = $('#inputWithId') 
 
    var buttonIdToDelete = input?input.val():null 
 

 
    removeButton(buttonIdToDelete) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mainButtons"> 
 
<button onclick="addButton()">Add Contact</button> 
 
<button id="removeButton">Remove Contact</button> 
 
<label for="inputWithId">Button id:</label> 
 
<input id="inputWithId" /> 
 
</div> 
 
    </br> 
 
<div id="que"></div>

來源

2017-08-19 03:36:02

Dude you're awesome（y）This help a lot：D Thank you！ –

刪除特定DOM元素有多種方式。

$(".btn").not(':first').remove(); // will remove all but first btn 
$(".btn").not(':last').remove(); // will remove all but last btn 
$(".btn").not(':last').not(':first').remove(); // will remove all in between first and last btn 

$(".btn").eq(-1).remove() // will remove the last occurrence of .btn 
$(".btn").eq(0).remove() // will remove the first occurrence of .btn 
$(".btn").eq(1).remove() // will remove the second occurrence of .btn

啊，但我認爲你真正需要的只是刪除被點擊的按鈕。

你可以這樣做：

$(".btn").click(function (e) { 
$(e.target).remove(); 
}); // will remove the button that is being clicked

或者，如果你要刪除的元素不被點擊的人，但旁邊是被點擊

$(".btn").click(function (e) { 
$(e.target).prev().remove(); 
}); // will remove the closest previous element to the button being clicked

或

$(".btn").click(function (e) { 
$(e.target).next().remove(); 
}); // will remove the closest subsequent element to the button being clicked.

按鈕

或

$(".btn").click(function (e) { 
$(e.target).next().next().remove(); 
}); // will remove the element after the closest subsequent element to the button being clicked.

依此類推。希望這可以幫助！

來源

2017-08-19 03:20:12 Crashtor

我很困惑哈哈我很抱歉。你能更專注於我的代碼集嗎？ –

爲什麼你在增加按鈕後減去-1會增加你最後一個按鈕的號碼。所以你不必減去它。

function removeButton(){ 
    if (increment >= 0) { 
    $("#btn"+(increment)).remove(); 
    increment--; 
    } 
}

來源

2017-08-19 03:32:01

你知道添加和刪除的替代方法嗎？ –

如果你想刪除或添加專門，那麼你應該傳遞你的按鈕ID在功能。另一種方法是你應該添加按鈕和刪除按鈕從JavaScript。 –

您可以爲所有按鈕添加刪除按鈕，或者您可以爲所有已添加的按鈕設置複選框，並且只能刪除已選中的按鈕。 –

如何刪除特定的按鈕？

回答

相關問題